看了几个React配合webpack的教程，大部分都因为版本问题过时了。终于找到了一个不错的教程。记录下其中的知识点。

首先万分感谢这个教程的制作者。少走了许多弯路，正在学习webpack的小伙伴可以来看看，版本的坑暂时没有！！！！ 2017_7_6又加了一个非常有用的教程

链接如下：webpack-react之webpack篇 --上

链接2如下: webpack+react

  • 关于热加载；webpack-dev-server的作用能够保证实时刷新的作用，但它有两种形式，一种是全体刷新，一种是局部刷新，（貌似所谓的热替换直接的意思就是局部刷新？？）在很大的项目中，我们所希望的自然是局部刷新。而在 package.json中这样配置.
  1.   "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "dev": "webpack-dev-server --devtool eval-source-map --progress --content-base ./build",
  4.     "build": "webpack"
  5.   }

之后当启动服务器之后我们要在路径中加上 localhost:xxxx/webpack-dev-server 其中xxxx为端口号，可选范围内随意。之后我们就可以通过谷歌的调试插件看到局部更新的效果了。

  • webpack相关
  1. 关于改名，我们先把webpack.config.js改名成为webpack.dev.config.js，之后在命令行中输入webpack.dev.config.js之后就可以用这个名字启动了，不过此时用webpack已经无效了。

    如果想要完全使用这个名字并且用webpack命令启动的话，需要在npm里面的package.json中修改scripts，加入"webpack":"webpack --config webpack.config.js(这里的名字想怎么改就怎么改) --progress --display --colors"
  2. 关于不确定的输出文件名字，比如我们不使用bundle.js而使用filename:'[name]-[chunkhash].js'，根据教程，使用html-webpack-plugin来达成我们的目的。
  • 首先npm install html-webpack-plugin --save-dev
  • 之后在webpack.config.js中引入 const htmlWebpackPlugin=require('html-webpack-plusin');，然后我们在output后面加上plugins；[new htmlWebpackPlugin()],之后可以发现我们的插件已经生效，html已经生成了引用。不过在这个时候，它是自动生成的html文件.

    源代码仅供参考： https://github.com/dirstart/webpack-learn/tree/for_blog_1/practice/two

    如果我们继续在其中添加
  1. const path=require('path');
  2. const htmlWebpackPlugin=require('html-webpack-plugin');
  3. module.exports={
  4. 	entry:'./src/script/main.js',
  5. 	output:{
  6. 		// filename:'bundle.js',
  7. 		filename:'[name]-[chunkhash].js',
  8. 		path:path.resolve(__dirname,'./dist/js')
  9. 	},
  10. 	plugins:[
  11. 		new htmlWebpackPlugin({
  12. 			template:'index.html'
  13. 		})
  14. 	]
  15. }

添加了template后的作用是，让输出的html以我们template上下文中html为蓝本输出index.html

3.webpack中添加loader的方法有三种，一种是直接在require中添加，比如

  • require('style-loader!css-loader!./style.css');
  • webpack --module-bind 'css=style!css' 这种方法是在命令行中添加
  • 写在配置文件中
  1. 	module:{
  2. 		loaders:[{
  3. 			test:/\.js$/,
  4. 			loader:'babel-loader',
  5. 			query:{
  6. 				presets:["es2015"]
  7. 			}
  8. 		}]
  9. 	}

另外，关于loader的串联，我们在require文件中只要写"!"就好了，但是我们在配置文件中的模块中需要这样写

  1. {
  2. 			test:/\.css$/,
  3. 			loader:["style-loader","css-loader"]
  4. 		}

注意，模块名要写全，不能直接写style，不然报警了

另外还有其他的写法，下图来自官方文档==========》

  1. {
  2.     module: {
  3.         loaders: [
  4.             { test: /\.jade$/, loader: "jade" },
  5.             // => "jade" loader is used for ".jade" files
  7.             { test: /\.css$/, loader: "style!css" },
  8.             // => "style" and "css" loader is used for ".css" files
  9.             // Alternative syntax:
  10.             { test: /\.css$/, loaders: ["style", "css"] },
  11.         ]
  12.     }
  13. }

4.关于webpack是如何出html模板文件的呢？主要还是采用loader的机制。我通过下面几张截图来大概阐释一下。同时我感觉这跟Vue，React等有相似的地方。

---首先，这是index.html里面的东西

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. </head>
  7. <body>
  8. 	<div id="app">
  9. 	</div>
  10. </body>
  11. </html>

----这是app.js里面的构建，其实就是将我们的Layer挂载在div#app中

  1. import Layer from './components/layer/layer.js';
  2. import './css/common.css';
  3. const App=function(){
  4. 	var dom=document.getElementById('#app');
  5. 	var layer=new Layer()
  6. 	dom.innerHTML=layer.tpl;
  7. }
  8. new App();

-----这个是我们所挂载的东西

  1. import tpl from './layer.html';
  2. import './layer.less';
  3. function layer(){
  4. 	return {
  5. 		name:'layer',
  6. 		tpl:tpl
  7. 	}
  8. }
  9. export default layer;

---之后采用html-loader来读取这个文件。直接用html-loader这种情况是指不用任何模板的时候。

除此之外，还有使用其他模板来编译html的，比如说ejs，pug(jade)

下图文件为layer.tpl，当然，也可以取名为.ejs格式的，之后从js中import进去，用document.getElementById之后挂载上去

  1. <div class="layer">
  2. 	<div>this is <%= name %> layer</div>
  3. 	<% for (var i=0;i<arr.length;i++){ %>
  4. 	<%=arr[i]%>
  5. 	<% } %>
  6. </div>

在webpack的loader之中这样写

  1. {
  2. 			test:/\.tpl$/,
  3. 			loader:'ejs-loader'
  4. }

Babel相关

1.因为之前总是使用babel-core，babel-loader安装，就会发现常常又少了东西.这个问题待更吧。

2.为什么babel打包的那么慢呢？问题出在loader上，因为loader是非常耗时的东西。我们可以通过过滤掉一些不用编译的文件来提高速度。其实主要就是用include和exclude来包含或者排除范围。示范如下：

  1. 	module:{
  2. 		loaders:[{
  3. 			test:/\.js$/,
  4. 			loader:'babel-loader',
  5. 			exclude:/node_modules/,
  6. 			query:{
  7. 				presets:["es2015"]
  8. 			}
  9. 		}]
  10. 	}

!!但是问题来了，其实这样的速度提升并不明显，用include才能明显地提升速度

  1. module:{
  2. 		loaders:[{
  3. 			test:/\.js$/,
  4. 			loader:'babel-loader',
  5. 			exclude:/node_modules/,
  6. 			include:/src/,
  7. 			query:{
  8. 				presets:["es2015"]
  9. 			}
  10. 		}]
  11. 	}

关于包含和排除的文件，也可以调用path的resolve来实现，当我们使用path.resolve(__dirname,'xx')的时候，我们可以发现，我们的速度变得更快了。

  1. var path=require('path');
  2. // var htmlWebpackPlugin=require('html-webpack-plugin');
  4. // console.log("现在的路径是"+path.resolve(__dirname,'/the_last_webpack/app/'));
  5. //如果是 path.resolve(__dirname,'/app/');
  6. //它会输入 ==>  E:/app 
  8. module.exports={
  9. 	entry:"./app/main.js",
  10. 	output:{
  11. 		path:path.resolve(__dirname,'./build/'),
  12. 		filename:'bundle.js'
  13. 	},
  14. 	module:{
  15. 		loaders:
  16. 		[{
  17. 			test:/\.html$/,
  18. 			loader:'html-loader'
  19. 		},{
  20. 			test:/\.(js|jsx)$/,
  21. 			loader:"babel-loader",
  22. 			// exclude:path.resolve(__dirname,'/the_last_webpack/node_modules/'),
  23. 			exclude:/node_modules/,
  24. 			//我的上面和下面都是对的，再下方也是对的，但是，为什么path.resolve(__dirname,/app/)是错的？
  25. 			// include:/app/,  这样也是对的
  26. 			include:path.resolve(__dirname,'app'),
  27. 			// include:path.resolve(__dirname,'/app/main.js'),
  28. 			query:{
  29. 				presets:["react","es2015"]
  30. 			}
  31. 		}]
  32. 	}
  33. 	// plugins:[
  34. 	// 	new htmlWebpackPlugin({
  35. 	// 		filename:'index.html',
  36. 	// 		filename:'index.html'
  37. 	// 	})
  38. 	// ]
  39. }

Webpack热加载和React（其中有关于include和exclude的路径问题）的更多相关文章

  1. 使用webpack热加载，开发多页面web应用

    我们一般使用webpack热加载开发SPA应用,但工作中难免会遇到一些多页面的demo或项目. 故参考 kingvid-chan 的代码,搭了一个使用HRM开发多页面web应用的脚手架,刚好也进一步学 ...

  2. webpack热加载：修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  3. （译文）开始学习Webpack-应用TypeScript，配置热加载和Source Map

    项目初始化:采用TypeScript 我们的版本是: $ node --version v8.5.0 $ npm --version 5.5.1 npm版本升级了,因为npm最近带来了新特性,本地会生 ...

  4. webpack2+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行 ...

  5. webpack3+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack3中的热替换相比较1更加简洁. 1. 先看效果 Demo地址 https://github.com/ ...

  6. webpack 教程 那些事儿03－webpack两大精华插件，热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  7. webpack无法热加载（__webpack_hmr 502）

    最近本地开发项目代码一直无法热加载,于是就抽空想办法解决 我们线上的地址是:https://aitest.ichuanyi.com/ai-admin/#/  其实ai-admin是线上的一个目录 所以 ...

  8. webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)

    “热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...

  9. react热加载失败

    react热加载失败 原因:路径名字大小写错误, 不是全部加载失败,有的时候可以用,有的时候不可以 热加载插件:webpack-dev-server

随机推荐

  1. 本机不装Oracle，使用plsql连接远程Oracle的方法

    由于Oracle的庞大,有时候我们需要在只安装Oracle客户端如plsql.toad等的情况下去连接远程数据库,可是没有安装Oracle就没有一切的配置文件去支持.最后终于发现一个很有效的方法,Or ...

  2. Windows常用的命令

    wmic msinfo32 regedit msconfig

  3. Poj 2853,2140 Sequence Sum Possibilities(因式分解)

    一.Description Most positive integers may be written as a sum of a sequence of at least two consecuti ...

  4. HDOJ1015(简单深搜)

    Safecracker Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. 通过 命令提示符（cmd.exe）连接 Oracle 数据库

    通过IP 连接数据库: sqlplus userName/userPassword@//IP:port/SID 例:sqlplus testuser/123456@//192.168.0.1:1521 ...

  6. HTTP之cookie技术

    Cookie由变量名和值组成, 其属性中既有标准的Cookie变量, 也有用户自己创建的变量,属性中变量是用"变量=值"形式来保存 Cookie格式如下: Set-Cookie: ...

  7. Web Form要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。”的解决办法。

    1.先将aspnet.scriptmanager.jquery.dl 复制到bin  (网站根目录下的bin文件夹找不到,看看下面的图片中点击[显示所有文档])  文件夹下.   2.在网站根目录下s ...

  8. 【总结整理】JQuery基础学习---动画

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  9. sell01 环境搭建、编写持久层并进行测试

    1 环境配置 JDK 1.8 MAVEN 3.5 MYSQL 5.7 VirtualBox 5.1 2 搭建MYSQL环境 下载 VM 和 虚拟镜像文件 虚拟镜像文件:点击前往 技巧01:安装完vir ...

  10. Entity Framework Code-First（16）：Move Configurations

    Move Configurations to Separate Class in Code-First: By now, we have configured all the domain class ...