如何用webpack-hot-plugin实现多页面HMR

1,721 阅读1分钟

问题描述

在利用webpack搭建应用工程时,我们采用wepack-dev-middleware + webpack-hot-middleware来实现可热刷新的本地服务器以供开发时调试。按照webpack-hot-plugin说明(Add 'webpack-hot-middleware/client' into the entry array),我们需要在webpack的配置项中添加一个字符串:hotMiddlewareScript

const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
webpackConfig.entry.push(hotMiddlewareScript);
  • 添加hotMiddlewareScript原因

添加这一行的目的是客户端配置,根据文档说明可知:这句字符串的添加会使得客户端连接服务端(也就是我们自定义的dev-server),在bundle被rebuild时可以接收到相关通知(bundle变动信息),进而就会更新客户端相应的bundle,实现热刷新;

  • 问题

但是因为为来照顾多页面配置,我们的entry项配置是一个对象,如下:

entry: {
    main: [path.resolve(SRC_PATH, 'index.js')]
  }

那么,就无法使用push函数直接将wepback-hot-plugin要求加入的字符串添加到entry上,那么,面对entry为对象(多页面配置)的情况,应该如何添加hotMiddlewareScript呢?

解决方案

  1. webpack.common.config.js中:
entry: {
    // 这里我们可以配置多个入口以配合多页面
    main: [path.resolve(SRC_PATH, 'index.js')],
    sub: [path.resolve(SRC_PATH, 'sub/index.js')] 
  },
  1. 在自定义的本地开发服务器中dev-server中:
const webpackConfig = require('./webpack.dev.config.js');
...
const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
// 这里遍历entry给每一个chunk的数组后面加上hotMiddlewareScript
for (let key of Object.keys(webpackConfig.entry)) {
  webpackConfig.entry[key].push(hotMiddlewareScript);
}
  1. 启动本地服务:npm start
// package.json
"start": "npx cross-env NODE_ENV=development node ./build/devServer.js"

解决思路

  1. 首先是查找官网
  2. 然后可以去网上搜有无相关问题
  3. 然后去看相关源码,这里就是去读webpack-hot-middleware中的部分源码找到了解决方案