浏览器自动刷新

LiveReload或者Browsersync能够检测我们的开发代码变化而自动刷新浏览器，在webpack也有相同方式。

在开发环境中，命令行下可以通过webpack --watch方式，在开发代码变化时候会自动重新编译打包代码。另外webpack-dev-server插件也是一个很好的方式，它还支持Hot Module Replacement (HMR)热替换，自动刷新浏览器。

如果不是开发环境下，可以考虑其他方式，如apache或者nginx

在使用IDE开放的时候，需要取消写安全模式，才能让HMR生效。

开始使用webpack-dev-server

安装npm i webpack-dev-server --save-dev

快速开启方式webpack-dev-server --inline

在package.json中配置

  1. ...
  2. "scripts": {
  3.   "start": "webpack-dev-server",
  4.   "build": "webpack"
  5. },
  6. ...

可以添加--inline在start命令中。此时代码变更会重新编译但是浏览器并不自动刷新。

配置热替换(HMR)

命令行中开启hmr：webpack-dev-server --inline --hot

定义HMR配置，创建libs/parts.js文件

  1. // libs/parts.js文件
  2. const webpack = require('webpack');
  3. exports.devServer = function(options) {
  4.   return {
  5.     devServer: {
  6.       // 启用HTML5 Histort API（实现ajax的回退）
  7.       historyApiFallback: true,
  8.       // 这里并需要设置 HotModuleReplacementPlugin!
  9.       hot: true,
  10.       inline: true,
  11.       // 错误时候输出
  12.       stats: 'errors-only',
  13.       // 设置host和port
  14.       host: options.host, // Defaults to `localhost`
  15.       port: options.port // Defaults to 8080
  16.     },
  17.     plugins: [
  18.       // 启用`multi-pass`在大的项目中优化执行
  19.       // in larger projects. Good default.
  20.       new webpack.HotModuleReplacementPlugin({
  21.         multiStep: true
  22.       })
  23.     ]
  24.   };
  25. }
  1. // webpack.config.js文件
  3. const path = require('path');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const merge = require('webpack-merge');
  6. const validate = require('webpack-validator');
  7. const parts = require('./libs/parts');
  9. ...
  10. switch(process.env.npm_lifecycle_event) {
  11.   case 'build':
  12.     config = merge(common, {});
  13.     break;
  14.   default:
  15.     // config = merge(common, {});
  16.     // 合并在/libs/parts.js里的配置
  17.     config = merge(
  18.       common,
  19.       parts.devServer({
  20.         // Customize host/port here if needed
  21.         host: process.env.HOST,
  22.         port: process.env.PORT
  23.       })
  24.     );
  25. }
  27. module.exports = validate(config);

默认启动链接localhost:8080

HMR在windows，ubuntu和vagrant上处理

以上步骤在windows,ubuntu和vargrant上可能会有问题，需要额外处理

  1. libs/parts.js
  3. const webpack = require('webpack');
  5. exports.devServer = function(options) {
  6.   return {
  7.     watchOptions: {
  8.       // Delay the rebuild after the first change
  9.       aggregateTimeout: 300,
  10.       // Poll using interval (in ms, accepts boolean too)
  11.       poll: 1000
  12.     },
  13.     devServer: {
  14.       ...
  15.     },
  16.     ...
  17.   };
  18. }

另一种方式

除了使用webpack-dev-server还有另外方式，可以在Express里皮遏制，通过middleware插件，或者是查阅webpack的Node.js API

dotenv插件，允许通过.env读取相关需要设置的环境变量

CLI和Nodejs API两种方式是不同的，有些情况下建议使用Nodejs API方式

<<上一节:拆分配置文件 >>下一节:刷新CSS