Webpack2 完整踩坑教程(三)

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

三．Webpack-dev-server

Webpack的加载器有两个接口重要的接口：

webpack cli ——默认接口（和webpack一起安装了，就是npm run build，生产版本所使用的）
Webpack-dev-server ——通过cli和配置文件（webpack.config.js）的配置项来控制webpack的打包动作，一般为开发版本所用

1.安装webpack-dev-server : npm install webpack-dev-server –save-dev
2.创建webpack.config.js文件，并添加基本配置

var path = require('path'); // 导入路径包
module.exports={
entry:'./src/index.js',//入口文件
output:{
path:path.join(__dirname,'dist'),// 指定打包之后的文件夹
publicPath:'/dist/',// 指定资源文件引用的目录
filename:'bundle.js'// 指定打包为一个文件 bundle.js
}}

打包所需的路径都已在webpack.config.js配置后，package.json的build则去掉路径，并添加webpack-dev-server启动：”dev”:”webpack-dev-server”

...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist && webpack --watch",
"dev": "webpack-dev-server"
},
...

运行npm run dev启动webpack-dev-server进行打包，在浏览器输入localhost:8080直接打开，没毛病。
修改messages.json的内容，保存，可以看到浏览器实时更新了数据。

在实际开发中，我们往往有以下需求：

1、每次修改代码后，webpack可以自动重新打包，webpack-dev-server有两个用于自动刷新模式：iframe和inline
2、浏览器可以响应代码变化并自动刷新（hot）

·iframe
页面被嵌套在一个iframe下，代码发生改动后，iframe会重新加载
使用此模式无需额外配置，只需访问http://localhost:8080/webpack-dev-server/index.html即可，显然webpack-dev-server默认的模式就是iframe。

·inline
为整个页面提供了“Live reloading”功能。webpack官方提供的一个小型Express服务器。

·hot
提供了“模块热重载”功能，它会尝试仅仅更新组件被改变的部分（而不是整个页面）。会尝试先去通过 HMR 更新然后可能尝试刷新整个页面。只需要加上一个 webpack/hot/dev-server entry point，并且在 dev-server 调用时加上参数 –hot。如果我们把inline和hot这两个选项都写上，那么当文件被改动时，webpack-dev-server会先尝试HMR，如果这不管用，它就会重新加载整个页面。

hot（HMR）和inline使用有两种方式：CLI和Node.js Api

1>CLI方式比较简单，只需修改package.json中scripts配置，添加 –inline –hot

“dev”: “webpack-dev-server –inline –hot”

2>node.js Api方式

1.在主目录下，新建dev-server.js文件

var WebpackDevServer=require('webpack-dev-server');
var webpack=require('webpack');
var config=require('./webpack.config');
var path=require('path');
var compiler=webpack(config);
var server=new WebpackDevServer(compiler,{//创建服务器实例
hot:true,//HMR配置
filename:config.output.filename,
publicPath:config.output.publicPath,//必填
stats:{
colors:true
}
});
server.listen(8080,'localhost',function(){});

2.修改webpack.config.js配置

var path=require('path');// 导入路径包
var webpack=require('webpack');
module.exports={
entry:[//入口文件
'./src/index.js',
'webpack/hot/dev-server',//调用热重载 hot
'webpack-dev-server/client?http://localhost:8080'//添加webpack-dev-server客户端
],
plugins:[
new webpack.HotModuleReplacementPlugin()//全局开启热代码替换
],
output:{
path:path.join(__dirname,'dist'),// 指定打包之后的文件夹
publicPath:'/dist/',// 指定资源文件引用的目录
filename:'bundle.js'// 指定打包为一个文件 bundle.js
}
}

3.在index.js最底下添加hot调用

if(module.hot){//启用热重载 module.hot.accept();}

4.修改package.json启动方式

...
"scripts": {
"build": "rimraf dist && webpack --watch",
"dev": "node dev-server.js"
},
...

5.运行npm run dev ，在浏览器输入localhost:8080查看，然后尝试修改index.js或messages.json的数据，保存，再看浏览器，是不是自动刷新了？