乐趣区

关于前端:多入口-Webpack-热更新失效

jiezi

前言

Webpack 对于古代前端开发者，想必是相当相熟了，在很多我的项目中，利用十分宽泛，而 webpack-dev-server，置信大家应该也都接触过。最近，作者在配置多入口，热更新在单入口是好使的，后果到了多入口不好使？，而后通过 Google 寻找答案，找到了一篇 issue，HMR not working with multiple entries，跟我的问题相似，如同真的有 BUG？看到作者回复

v4 修复了该问题，我丢，我还在应用 v3，翻看 v4 文档

此时，只有一个感觉，热更新都多久的货色了，不应该存在多入口，热更新有问题吧？降级到 v4 之后，还是不行，过后我这暴脾气就上来了，间接翻看源码。翻看源码之前，首先要对热更新是个什么，有个根底的理解。

模块热更新

模块热更新 (Hot Module Replacement) 是指在浏览器运行过程中，替换、增加或删除模块，而无需从新加载整个页面。

  • 保留在齐全从新加载页面期间失落的应用程序状态
  • 在源代码中对 CSS/JS 进行批改，会立即在浏览器中进行更新，并只更新扭转的内容，节俭开发工夫

比照 Live Reload 计划，HMR 体现了其弱小之处，实时模块热刷新和保留利用状态，极大的进步了开发效率和开发体验。

启用模块热更新

HMR 的启用非常简略，一个带有热更新性能的 webpack.config.js 文件的配置如下：

const path = require('path');

module.exports = {
    // ...
    entry: {app: ['./src/index.js']
    },
    devServer: {contentBase: path.resolve(__dirname, 'dist'),
        hot: true,
        historyApiFallback: true,
        compress: true
    }
};

src/index.js

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

原理

网上对于 Webpack 热更新原理文章很多，这里就不详细描述了，举荐几个。

  • 模块热更新
  • 轻松了解 webpack 热更新原理
  • Webpack HMR 原理解析

调试

npm link

$ git clone https://github.com/webpack/webpack-dev-server.git

肯定要找到你我的项目中对应的版本包，对号入座噢，否则会报错，把 webpack-dev-server 我的项目拉下来之后，尝试在 webpack-dev-server/lib/Server.js 该文件减少一行 console.log

而后进入根目录

$ cd webpack-dev-server
$ npm link

生成软链

cd 我的项目地址
npm link webpack-dev-server

link 胜利之后，会提醒上面，更换了 webpack-dev-server 地址

jiang@JiangdeMacBook-Pro-3 commonVideoClient % cnpm link webpack-dev-server
/Users/jiang/Desktop/commonVideoClient/node_modules/webpack-dev-server -> /usr/local/lib/node_modules/webpack-dev-server -> /Users/jiang/Desktop/webpack-dev-server

而后在我的项目跑 webpack-dev-server，在控制台应该就会看到对应的输入了，调试源码十分不便。

npm link 计划，第三方库和我的项目属于不同的我的项目，它们有本人的 node_modules，如果第三方库和我的项目都应用了同一个依赖，它们会在各自的 node_modules 去查
找，如果这个依赖不反对多例，利用就会异样。

yalc

在开发和创作多个包（公有或公共）时，您常常发现自己须要在本地环境中正在解决的其余我的项目中应用最新 /WIP 版本，而无需将这些包公布到近程注册核心。NPM 和 Yarn 应用相似的符号链接包 (npm/yarn link) 办法解决了这个问题。尽管这在许多状况下可能无效，但它常常带来令人讨厌的束缚和依赖解析、文件系统之间的符号链接互操作性等问题。

全局装置 yalc

npm install -g yalc

生成 yalc 包

$ cd webpack-dev-server
$ yalc publish

能够在本人本地 /Users/jiang/.yalc/packages/webpack-dev-server，找到对应的包

cd 我的项目地址
yalc link webpack-dev-server

link 后，能够在本人我的项目下，找到 .yalc

每次手动批改第三方库的代码，都须要手动 link，就很麻烦，对不对？ok，神器来了，nodemon，

npm install -g nodemon

nodemon
--ignore dist/
--ignore node_modules/
--watch lib # 察看目录
-C # 只在变更后执行，首次启动不执行命令
-e js,ts,html,less,scss 监控指定后缀名的文件
--debug # 调试
-x "yalc publish" 自定义命令

而后，咱们来试试这个工具，在 webpack-dev-server，新增三行可执行命令

运行下 npm run watch，而后每次批改，都会自动更新，是不是很难受？

<img width=”119″ alt=”WeChat7c8e2813667093e82dc47a836e6d5cdb” src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fcceba8aa0543799b4e897141912f13~tplv-k3u1fbpfcp-zoom-1.image”>

网页调试

找到对应的文件地位和代码行数，通过浏览器进行断点调试，这个就不开展讲了。

找到问题

通过一番折腾，降级 webpack-dev-server@v4，原理剖析，源码调试，与之前失常的单页利用进行比照，发现都是失常的，还是不行，我就郁闷了，为何呢？忽然之间，我悟了，如同多页利用没有在入口进行 module.hot

之前在 app.jsx 中写的 module.hot

改在入口文件 进行 module.hot

ok，胜利，喜大普奔。

总结

带着问题，浏览源码是最高效的，这样你在浏览源码的过程中也不会感到无聊，因为你是要解决问题，才会去看源码，对于不懂的代码，一点一点调试，一步一步走上来，再联合现有的一些原理文章（站在伟人的肩膀上）就会找到答案。这次的经验，也算很有意思，感激小伙伴们的浏览，喜爱的能够点个赞噢 🌟 ～

退出移动版