注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204 本人通过此链接博客学习，并在此基础上增加自己的想法。
上节Webpack2 入门踩坑教程（二）：http://blog.csdn.net/echo601/article/details/76177846
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启动：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rimraf dist && webpack --watch", "dev": "webpack-dev-server" },命令行输入npm run build启动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
CLI方式比较简单，只需修改package.json中scripts配置，添加scripts中的dev配置： "dev": "webpack-dev-server –inline –hot"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": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rimraf dist && webpack --watch", "dev":"node dev-server.js" },5：运行npm run build，在浏览器输入localhost:8080查看，然后尝试修改index.js或messages.json的数据，保存，再看浏览器，是不是自动刷新了？
