webpack实现热更新（实施同步刷新）

2023年6月1日上午10:09 • JavaScript

webpack实现热更新是在开发过程中非常常见的需求，它可以在代码修改后自动刷新页面，使开发人员能够更方便地查看效果。下面是实现webpack热更新的完整攻略：

1. 配置webpack-dev-server

webpack-dev-server是webpack中的一个开发服务器，它可以实现热更新，而我们只需要在启动webpack-dev-server时添加一个--hot参数，就可以开启热更新功能。

webpack-dev-server --hot

2. 安装webpack-hot-middleware

除了通过webpack-dev-server实现热更新，还可以通过webpack-hot-middleware来实现热更新。webpack-hot-middleware是一个由webpack开发团队提供的中间件，可以在koa、express等各种服务器框架中使用。

我们可以通过NPM安装webpack-hot-middleware：

npm install --save-dev webpack-hot-middleware

3. 配置webpack

要启用webpack的热更新功能，我们需要在webpack配置文件中进行一些配置，这些配置包括：

3.1 配置entry

在entry中添加一个webpack-hot-middleware/client，它会自动向服务器发送热更新的请求。

entry: {
  app: ['webpack-hot-middleware/client', './src/index.js']
},

3.2 配置output

在output中添加一些额外的字段来指定热更新的输出文件名。

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
  publicPath: '/',
  hotUpdateChunkFilename: 'hot/hot-update.js',
  hotUpdateMainFilename: 'hot/hot-update.json'
},

3.3 配置plugins

在plugins中加入webpack的内置插件HotModuleReplacementPlugin，这个插件可以自动实现热更新。

plugins: [
  new webpack.HotModuleReplacementPlugin()
],

示例1

我们通过一个简单的示例来演示如何使用webpack-dev-server实现热更新。首先创建一个webpack.config.js文件，进行组态配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: ['./src/index.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  }
};

在package.json文件中加入如下的脚本：

"scripts": {
  "start": "webpack-dev-server --config webpack.config.js"
}

然后在src/index.js中加入如下的代码：

var element = document.createElement('div');
element.innerHTML = 'Hello World!';
document.body.appendChild(element);

if (module.hot) {
  module.hot.accept();
}

接下来在终端进入项目根目录，运行：

npm start

访问http://localhost:8080可以看到页面输出了Hello World!，如果我们修改src/index.js的内容，保存后页面会自动刷新并展示最新的内容。

示例2

我们通过一个简单的示例来演示如何使用webpack-hot-middleware实现热更新。首先创建一个webpack.config.js文件，进行组态配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: ['./src/index.js', 'webpack-hot-middleware/client']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

在src/index.js中加入如下的代码：

var element = document.createElement('div');
element.innerHTML = 'Hello World!';
document.body.appendChild(element);

if (module.hot) {
  module.hot.accept();
}

然后我们利用webpack提供的webpack-dev-middleware和webpack-hot-middleware来配合koa实现热更新：

const Koa = require('koa');
const webpack = require('webpack');
const devMiddleware = require('webpack-dev-middleware');
const hotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const compiler = webpack(config);
const app = new Koa();

app.use(devMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.use(hotMiddleware(compiler));

app.listen(3000, function() {
  console.log('listening on 3000');
});

在终端中运行：