Webpack 是一个模块打包工具，它的强大功能让前端开发变得更加高效和方便。Webpack 2 在发布后得到了广泛的使用和认可，但是现在 Webpack 3 已经发布了，它带来了一些重要的改变和优化，本文将介绍如何将你的项目从 Webpack 2 升级到 Webpack 3。
1. 更新 Webpack 和相关依赖
首先，你需要更新 Webpack 和相关依赖，包括 webpack, webpack-dev-server, babel-loader, style-loader, css-loader 等。可以使用以下命令：
npm install webpack@latest webpack-dev-server@latest babel-loader@latest style-loader@latest css-loader@latest --save-dev
2. 更新 Webpack 配置文件
Webpack 3 对配置文件做了一些改变，你需要更新你的配置文件以适应这些变化。以下是一些需要注意的点：
2.1 mode
Webpack 3 新增了一个 mode 选项，它有两个值：development 和 production。这个选项会根据你的配置自动启用一些优化功能。你需要在你的配置文件中添加这个选项，例如：
module.exports = {
mode: 'production',
// ...
}2.2 resolve.modules
Webpack 3 不再默认添加当前目录到 resolve.modules，而是只添加了 node_modules。如果你使用了一些自定义的模块路径，你需要在配置文件中手动添加，例如：
-- -------------------- ---- -------
-------------- - -
-------- -
-------- -
----------------------- -------
--------------
-
--
-- ---
-2.3 resolve.extensions
Webpack 3 不再默认添加空字符串到 resolve.extensions，而是只添加了 ['.js', '.json']。如果你使用了一些其它的扩展名，你需要在配置文件中手动添加，例如：
module.exports = {
resolve: {
extensions: ['.js', '.json', '.jsx']
},
// ...
}2.4 module.rules
Webpack 3 引入了 module.rules，它取代了旧的 module.loaders。你需要更新你的配置文件以适应这个变化。以下是一个示例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -------
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
--
-- ---
-3. 更新插件
Webpack 3 也有一些新的插件，你可以使用它们来优化你的项目。以下是一些常用的插件：
3.1 UglifyJsPlugin
UglifyJsPlugin 是一个用于压缩 JavaScript 代码的插件，它可以帮助你减小文件大小并提高加载速度。你可以在生产模式下使用这个插件，例如：
-- -------------------- ---- -------
----- -------------- - ----------------------------------
-------------- - -
----- -------------
-------- -
--- ----------------
--
-- ---
-3.2 CommonsChunkPlugin
CommonsChunkPlugin 是一个用于提取公共代码的插件，它可以帮助你减小文件大小并提高加载速度。你可以在生产模式下使用这个插件，例如：
-- -------------------- ---- -------
----- ------------------ - --------------------------------------------------
-------------- - -
----- -------------
-------- -
--- --------------------
----- ---------
---------- -------- -------- -
------ -------------- -- -------------------------------------- --- --
-
---
--- --------------------
----- ----------
--
--
-- ---
-4. 结论
Webpack 3 带来了一些重要的改变和优化，升级到 Webpack 3 可以让你的项目更加高效和方便。在升级之前，你需要更新 Webpack 和相关依赖，更新配置文件以适应新的变化，使用新的插件来优化你的项目。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bb2b178388e33bb25e9a7