渊虹小站

首页收藏

开发环境设置浏览器自动刷新

开发环境中，如果在更新代码后，浏览器能够自动刷新，能够很大程度上提升我们的开发效率。在此记录一下，以webpack-dev-server和express两者提供服务的情况下，如何设置浏览器自动刷新。

webpack-dev-server

在webpack-dev-server提供服务的情况下，浏览器自动刷新的设置相当简单，只需要在webpack.config.js中加入以下代码即可：

...
devServer: {
    contentBase: './views',
    publicPath: '/',
},
...

相关contentBase和publicPath参数值可以按照需要进行设置，可参考webpack官网devServer配置项

以 express 提供服务

若以express提供服务，则需要使用webpack-dev-middleware和webpack-hot-middleware模块进行配置。首先

安装模块
npm install --save-dev webpack-dev-middleware webpack-hot-middleware
webpack配置

在 webpack 中添加配置

  • entry 配置增加对webpack-hot-middleware/client的引用
  • output 配置中增加publicPath配置
entry: [
    'webpack-hot-middleware/client?reload=true',
    path.resolve(__dirname, './entry/index.jsx')
],
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
},
express 增加中间件

增加对webpack-dev-middleware和webpack-hot-middleware的使用：

const webpack = require('webpack');

const config = require('./webpack.config')();
const compiler = webpack(config);

app.use(require("webpack-dev-middleware")(compiler, {
  noInfo: true, publicPath: config.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
reload 选项

webpack-hot-middleware/client可以配置很多选项，其中可以关注一下reload的参数。由于webpack-hot-middleware的主要目的是做热替换的。但是在某些项目中，比如React项目，单纯的webpack-dev-middleware和webpack-hot-middleware模块无法达到热替换的目的，设置reload=true会在当 webpack 检测到文件更新，但是无法完成热替换时，将替换方案退化为，重新刷新浏览器。

更多

热替换是比刷新浏览器更好的体验，React 的热替换可以参考：