问题描述
在利用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呢?
解决方案
entry: {
// 这里我们可以配置多个入口以配合多页面
main: [path.resolve(SRC_PATH, 'index.js')],
sub: [path.resolve(SRC_PATH, 'sub/index.js')]
},
- 在自定义的本地开发服务器中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);
}
- 启动本地服务:npm start
// package.json
"start": "npx cross-env NODE_ENV=development node ./build/devServer.js"
解决思路
- 首先是查找官网
- 然后可以去网上搜有无相关问题
- 然后去看相关源码,这里就是去读webpack-hot-middleware中的部分源码找到了解决方案