在前端开发中，webpack 对于打包和管理前端资源的作用不可忽视，其中 webpack 4.0 是目前最新的版本。在这篇文章中，我们将介绍如何进行 webpack 3.0 升级到 webpack 4.0，并探讨一些实践中值得注意的地方。
更新 webpack 和相关依赖
首先，我们需要在项目中安装最新的 webpack 和相关依赖。如下所示：
--- ------- ------- ----------- ------------------ ----------
其中 webpack-cli 是 webpack 的命令行工具，webpack-dev-server 是用于开发环境的服务器工具。这些模块需要我们升级到最新的版本，以兼容 webpack 4.0。
修改 webpack 配置
在 webpack 4.0 中，有一些配置项已经被移除或者修改了，我们需要相应地更新我们的 webpack 配置。
mode
webpack 4.0 新增了一个 mode 选项，可以指定构建的模式。其有两个可选值：development 和 production。当 mode 设置为 development 时，会进行一些优化，例如在开发过程中不会压缩代码，构建速度较快；当 mode 设置为 production 时，则会进行一系列的优化，例如压缩代码，删除无用的代码等。
-- ----------------- -------------- - - ----- ------------- -- --- -
optimization
webpack 4.0 对于代码的分块和优化做了很多改进，将 optimization 属性作为配置项暴露给开发者。通过 optimization 配置项，我们可以启用各种优化策略，包括代码压缩、拆分代码块等。例如：
-- -----------------
-------------- - -
------------- -
---------- -
--- ----------------
------ -----
--------- -----
---------- ----
---
--- ---------------------------
--
------------ -
------- -----
-
--
-- ---
-webpack.devserver.js 配置
webpack-dev-server 支持 HMR， static 以及 proxy 等配置项，细节升级可到 webpack 或 webpack-dev-server 进行查询。
-- --------------------
-------------- - -
------------ ------ -- ----- -- --- ------------------
--------- -----
----- -----
----- -----
---- -----
------ -----
------ -
------- -
------- ------------------------
------------ - -------- -- -
-
--
--升级后的问题解决
升级后，可能会遇到各种问题，例如打包速度变慢、 HMR 功能失效等。针对这些问题，我们可以采取以下方法进行解决：
加速构建速度
webpack 4.0 在打包时会对代码进行分块处理，这会导致打包速度变慢。我们可以采用以下方法来提高构建速度：
- 在本地启用多个 CPU 的 parallel-webpack 或者 HappyPack。
- 保证 loaders 和 plugins 都是最新版本。
- 使用 thread-loader 将一些 loaders 转成 workerPool 形式。
HMR 失效问题
当升级到 webpack 4.0 后，可能会遇到 HMR 失效的问题，此时我们需要针对不同的情况进行处理：
如果使用的是 Vue.js 框架，可以将它升级到最新版。
如果使用的是 React 框架，在 dev-server 中添加下面代码：
-- -------------------- ------- -- --- ---------- - ---- ----- ------- ----- -------- ----- ------ -------------- ------------- - -------- --------------- ----------------- ---- ----- ---- - -- -------- - --- ------------------------------------- -- --- - -- ---注意，如果是用的
webpack-dev-middleware设计API服务，需要在express-config中添加devMiddleWare.hot属性设置为true。如果 HMR 依然无法工作，可以尝试升级
webpack-dev-server到最新版本。
总结
在本文中，我们介绍了如何将 webpack 3.0 升级到 webpack 4.0，并介绍了新版本中的一些重要更新。同时我们也介绍了一些实践中可能会遇到的问题和解决方案。希望本文对于正在升级 webpack 的开发者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6535ec807d4982a6ebdaa7e5