webpack-dev-server 自动刷新

webpack-dev-server, 是一个静态资源服务器, 只用于开发环境.
提供客户端的运行环境,会被注入到页面代码中执行, 通过 Socket.IO 与服务器通信.

1. npm install webpack-dev-server -D
2. 配置 webpack.config.js, 添加:

devServer:{
        contentBase:__dirname
},

3. 命令行输入 node_modules/.bin/webpack-dev-server --hot ,配合 webpack -w 自动监听打包, 可以实现修改 css, js 代码时一保存文件自动刷新浏览器.

4. 把第3步替换为命令行输入 npm run dev, 作如下配置:
   添加 script 命令到 package.json:

"scripts": {
    "build":"webpack -w",
    "dev":"webpack-dev-server --hot"
  },

5. 如果没有指定 --hot 参数, 就要在 webpack.config.js 中添加:
   new webpack.HotModuleReplacementPlugin(), 并且

devServer:{
        contentBase:__dirname,
                hot:true
},

因为如果指定了 --hot 参数, HotModuleReplacementPlugin 是默认添加的. 参见 devServer.hot API

---

参考资料:
Express结合Webpack的全栈自动刷新
webpack/webpack-dev-server
react+webpack项目常用的插件(plugins)