Webpack 是一个常用的前端打包工具，它可以将多个模块打包成一个或多个 bundle。Webpack 4 是最新版本，并且在性能和功能方面都有所改进。本文将介绍如何升级到 Webpack 4，并提供一些深度和学习以及指导意义。
1. 安装 Webpack 4
首先，你需要使用 npm 或 yarn 来安装 Webpack 4。
npm install webpack@4 webpack-cli --save-dev # or yarn add webpack@4 webpack-cli --dev
如果你正在从旧版本的 Webpack 进行升级，那么你需要先卸载原来的 Webpack。
npm uninstall webpack webpack-cli -D # or yarn remove webpack webpack-cli -D
2. 配置文件更改
Webpack 4 的默认配置与之前版本不同。以下是一些主要更改：
2.1 mode 选项
Webpack 4 引入了 mode 选项，默认情况下为 'production' 或 'development'。mode 可以自动启用某些插件，例如 UglifyJSPlugin 和 DefinePlugin 等。
module.exports = {
mode: 'production',
// ...
}2.2 optimization 选项
Webpack 4 新增了 optimization 选项，用于配置优化策略。其中 minimize 选项已经被移除。你可以使用 optimize-css-assets-webpack-plugin 和 uglifyjs-webpack-plugin 来压缩 CSS 和 JavaScript。
-- -------------------- ---- -------
----- ----------------------- - ----------------------------------------------
----- -------------- - -----------------------------------
-------------- - -
------------- -
---------- -
--- --------------------------
--- -----------------
--
--
-- ---
-2.3 插件更改
Webpack 4 移除了一些插件，例如 CommonsChunkPlugin 和 ModuleConcatenationPlugin 等。部分插件被合并到 Webpack 的核心代码中，所以不再需要显式配置。例如，Scope Hoisting 现在作为默认行为启用。
以下是一个简单的配置文件示例：
-- -------------------- ---- -------
----- ----------------------- - ----------------------------------------------
----- -------------- - -----------------------------------
-------------- - -
----- -------------
------------- -
---------- -
--- --------------------------
--- -----------------
--
--
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
-
--3. 其他更改
除了上述更改之外，Webpack 4 还具有其他一些更改：
- 默认情况下，Webpack 4 不再自动加载 polyfill。你需要手动添加。
- Webpack 4 支持多种模块类型，包括 CommonJS、AMD、ESM 和其他类型。
- Webpack 4 不再支持 Node.js v4。建议使用 Node.js v6 或更高版本。
4. 结论
Webpack 4 是一个功能强大的工具，并提供了许多新的功能和性能优化。虽然升级可能需要一些时间和努力，但它可以帮助你更好地管理前端项目。如果你遇到困难，可以参考官方文档或社区资源，以获得更多帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37848