在前端开发中，webpack-dev-server 是一个非常常用的工具，它可以提供实时的编译和更新，让我们在开发过程中更加高效。但是，如果项目比较大，打包时间可能会比较长，而且每次代码变更都会触发重新打包，这样会严重影响开发效率。本文将介绍一些解决 webpack-dev-server 不断打包更新的方法，包括使用 HMR、使用缓存和使用 DllPlugin。
使用 HMR
HMR（Hot Module Replacement）是 webpack 提供的一种热替换技术，它可以在不刷新页面的情况下更新代码。使用 HMR 可以大大缩短打包时间，提高开发效率。
要使用 HMR，首先需要在 webpack 配置文件中添加如下代码：
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]然后，在需要进行热替换的模块中，需要添加如下代码：
if (module.hot) {
module.hot.accept();
}这样，每次代码变更都不会触发重新打包，而是直接进行热替换。
使用缓存
webpack-dev-server 默认情况下是不会使用缓存的，每次代码变更都会触发重新打包。但是，我们可以通过设置 cache 参数来启用缓存，从而减少打包时间。
要启用缓存，需要在 webpack 配置文件中添加如下代码：
devServer: {
cache: true
}这样，webpack-dev-server 会将每次打包的结果缓存起来，下次打包时可以直接使用缓存结果，从而减少打包时间。
使用 DllPlugin
DllPlugin 是 webpack 提供的一种优化打包速度的方式，它可以将一些不经常变动的代码提前打包成静态文件，从而减少每次打包的时间。要使用 DllPlugin，需要进行如下步骤：
- 创建一个 webpack 配置文件，用于打包公共代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
------- --------- ------------ ---------
--
------- -
----- -------------------- ------- -------
--------- ----------------
-------- ---------------
--
-------- -
--- -------------------
----- ----------------
----- -------------------- ------- ------ --------------
--
-
--- 在 webpack 配置文件中使用 DllReferencePlugin 引用公共代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-------- -
--- ----------------------------
-------- -------------------- -------
--------- ---------------------------------
--
-
--这样，每次打包时就不需要重新打包公共代码了，从而大大减少打包时间。
总结
本文介绍了三种解决 webpack-dev-server 不断打包更新的方法，包括使用 HMR、使用缓存和使用 DllPlugin。这些方法都可以有效地减少打包时间，提高开发效率。在实际开发中，可以根据具体情况选择合适的方法来优化打包速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a350bd10417a22297e717