在前端开发中，Webpack 是一个必不可少的工具。它可以帮助我们管理项目依赖、打包代码以及构建前端应用程序。而随着 Webpack 的不断发展与更新，Webpack5 成为了最新的主流版本。本文将分享从 Webpack4 到 Webpack5 的升级经验。
Webpack5 的新特性
Webpack5 相较于 Webpack4，增加了许多新特性，如：
- Module Federation: 支持多个独立的 Webpack 应用程序在一个宿主环境下实现共享模块。
- 支持 WebAssembly: 为 WebAssembly 提供原生支持。
- Tree-shaking: 可以更好的支持 tree-shaking。
除了新特性，在 Webpack5 中还有一些重大的变化。
Webpack5 的重大变化
支持 ES2020 全局变量
Webpack5 已经更新了全局变量，支持 ES2020 全局变量。因此，在 Webpack5 中，不再需要使用 babel-polyfill 来支持 ES6/7/8/9 等标准的全局变量。如果你现在在项目中使用了 babel-polyfill，在升级到 Webpack5 时，可以移除这个依赖。
使用 import()/动态import() 替代 require.ensure()
Webpack5 推荐使用 import()/动态import() 而不是 require.ensure() 来实现代码的按需加载。由于 require.ensure() 并不支持 ESM，而 import() 具有更快的性能和更好的兼容性，因此 Webpack5 把它作为新的方案。
移除 node.js 相关 API
在 Webpack5 中，已经移除了 node.js 相关 API，例如 –mode, –cache, –bail 等等。这意味着你需要使用 webpack-cli 代替之前的 webpack 命令，并且需要进行相应的修改。
Webpack5 升级经验分享
步骤一：升级 Webpack 和 Webpack-cli 版本
升级 Webpack 和 Webpack-cli 版本是升级到 Webpack5 的第一步。你可以直接在项目的 package.json 文件中修改版本号，然后运行 npm/yarn install。
{
"dependencies": {
"webpack": "5.0.0",
"webpack-cli": "4.0.0"
}
}步骤二：升级其他依赖
在升级 Webpack 和 Webpack-cli 后，你需要升级其他的依赖关系。具体需要升级哪些依赖关系，要视项目而定。通常来说，你需要升级以下的依赖：
- webpack-dev-server
- css-loader, style-loader
- sass-loader, less-loader, postcss-loader
步骤三：修改配置文件
修改 Webpack 配置文件是 Webpack5 升级的关键步骤。你需要根据 Webpack4 的配置选择性地修改webpack.config.js 文件。
修改webpack.config.js 文件
下面是修改webpack.config.js 文件的一些常见步骤:
1、修改 mode 选项
Webpack5 不再支持 –mode 选项，因此你需要把 mode 选项直接替换成 development 或 production。
-- -------------------- ---- ------- -- ------- - -------------- - - ----- ------------ - -- ------- - -------------- - - ----- ------------ -
2、修改 optimization 选项
Webpack5 优化了 tree-shaking，因此你需要深入了解相关的 tree-shaking 配置并进行相应的修改。以下是一个示例：
-- -------------------- ---- -------
-- ------- -
-------------- - -
------------- -
------------ -
------------ -
-------- -
----- -------------------------
----- ----------
------- -----
-
-
-
-
-
-- ------- -
-------------- - -
------------- -
------------ -
------- ------
----- ------
------------ -
------- -
----- -------------------------
----- ----------
------- ------
-------- ----
-
-
-
--
-3、使用 webpack5 的新特性
如果你想使用 Webpack5 的新特性，比如 Module Federation 等，在配置文件中进行相应的修改即可。以下是一个示例：
-- -------------------- ---- -------
-- ------- -
-------------- - -
-- ---
------------ -
-------------- -----
------ -----
---------------- -----
----------------- -----
------------ -----
------------ ----
--
------- -
----------- ------
----------- ----
--
-------- -
--- ------------------------
----- ------
--------- -----------------
-------- -
-------------- -----------------------------
--
------- -
------ -
---------- -----
---------------- -----------
--
------------ -
---------- -----
---------------- ------------------
--
-
--
-
-总结
通过 Webpack5 的升级之路，我们可以发现，在升级过程中，我们可以从中学到一些 Webpack5 的新特性，并且查找和解决问题的能力也会得到锻炼。希望我分享的这些经验和知识能对你进行升级提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482d8d248841e9894234cda