Webpack 是现代化的前端构建工具之一，它让我们在开发复杂应用时能够更好地管理代码、调试、构建和打包。Webpack 最新的版本是 5，但在本文中我们将探讨 Webpack 升级至 3 的相关知识，帮助那些还在使用旧版本的开发者们更好地管理他们的项目。
为什么需要 Webpack3？
虽然 Webpack 3 不是最新的版本，但它已经被广泛应用于许多应用和库中。如果你的项目还在使用 Webpack2 或更早的版本，升级到 Webpack3 可以带来以下好处：
- Webpack3 释放了一些对于开发环境和生产环境的相关设置，这使得更容易地在开发环境及其它环境之间进行切换。
- Webpack3 更好的支持异步代码块，这使得我们可以更好地控制项目的性能。
- Webpack3 支持 tree shaking，这使得打包出来的文件更小，加载更快。
如何升级 Webpack3
升级 Webpack3 需要执行以下步骤：
1. 安装 Webpack3
首先，你需要从 npm 安装 Webpack3：
npm install webpack@3.12.0 --save-dev
2. 更新你的 webpack.config.js 文件
你需要将你的 webpack.config.js 文件进行更新。以下是一个基础的 Webpack3 配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--Webpack3 在配置上提供了一些新的特性，如以下规则，它允许资源在被导入时自动加载：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
-------- ------
------- ---------------
-------- -
-------- --------
-------- ---------------------
-
--
-
----- ---------
---- ---------------- -------------
--
-
----- -----------------------
---- -
--------------
-
------- -----------------------
-------- -
-------------- -----
-------- -
------------ -----
--
-------- -
-------- ------
--
--------- -
-------- --------
------ -
--
--------- -
----------- ------
--
----- -
-------- --
-
--
--
--
--
-
-
-- ---
-上述代码中，对于 JavaScript 代码和 CSS 文件的处理相对简单，而对于图像的处理则是比较繁琐的。尤其是需要进行压缩时，需要使用到 image-webpack-loader 这个模块，需要进行一些相关的配置。
3. 更新你的 package.json 文件
你需要更新你的 package.json 文件来使用 Webpack3 作为你的构建工具：
-- -------------------- ---- -------
-
---------- -
-------- ------------------- --------
-------- -------- ------ -----------
--
------------------ -
---------- ----------
--------------------- ---------
-
-在 scripts 中，你可以看到两个命令：start 和 build。前者用于开发环境，后者用于生产环境。devDependencies 中列出了你的项目依赖的 Webpack3 和开发服务器。
4. 更新你的 loaders 和 plugins
Webpack3 中加载器和插件的 API 可能会有所改变，因此需要进行适当的调整。例如，一些加载器可能已经被标记为“过时”，你需要更换它们。
以下是一些常用的加载器和插件，它们可以在 Webpack3 中使用：
加载器
- babel-loader: 将 ES6+ 代码转换成 ES5 代码；
- style-loader: 将 CSS 插入到 DOM 中；
- css-loader: 处理 CSS 文件，使其可以被 webpack 引入；
- json-loader: 将 JSON 文件转换为 JavaScript 对象；
- url-loader: 读取文件并将小文件转换成 base64 字符串。
插件
- UglifyJSPlugin: 压缩你的输出代码；
- ExtractTextPlugin: 将 CSS 提取为单独的文件；
- HtmlWebpackPlugin: 以 HTML 的形式提供模板；
- CleanWebpackPlugin: 清空输出目录。
总结
升级 Webpack3 可以让你的项目更现代化，更好地控制你的代码性能。你需要仔细阅读官方文档并在升级前做好备份，这样可以避免出现不必要的错误。在升级时，请考虑使用一些自动化工具来帮助你处理常用的配置问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e83e06f6b2d6eab33c098d