Webpack 是一款现代的前端模块打包器，它可以将多个模块打包成一个或多个 Bundle，以确保应用程序在浏览器中能够高效且准确的运行。Webapck 的 4.0 版本带来了一些新特性，包括性能提升和升级，同时也需要注意一些升级方面的注意事项和优化方案。
升级注意事项
在升级 Webpack 到 4.0 时，需要注意以下几个方面：
1. 需要 Node.js 8.9 或更高版本
Webpack 4.0 需要 Node.js 8.9 或更高版本才能运行。如果你的 Node.js 版本低于 8.9，那么你需要先升级你的 Node.js 版本。
2. Webpack 和 Webpack-cli 应该分开安装
在 Webpack 4.0 中，Webpack 和 Webpack-cli 被分成两个不同的包进行安装。这意味着你需要分别安装这两个包：
--- ------- ------- ----------- ----------
3. 使用 mode 配置指令
在 Webpack 4.0 中，新增了一个 mode 配置指令，它可指定 Webpack 是运行在开发模式还是生产模式下。mode 配置指令有两个可选值：development 和 production。你可以在你的配置文件中指定 mode：
-------------- - - ----- -------------- -- --- ---------- -- --- --
4. 收到混淆警告
如果你的代码里使用了类似 UglifyJsPlugin 这样的正在过时的插件，那么你会接收到一些类似以下这样的警告：
------- -- ------------- --- ------ ------ --- --- ---- ---- --- ------ ------ -- ------------- -- ------------ -- ------ -------- --- ---- ------------
你可以通过删除这个插件或者升级到新的插件来解决这个问题。
优化方案
除了需要注意以上的升级事项，你还可以优化你的 Webpack 配置来提升应用程序的性能和加载速度。以下是一些可用的优化方案。
1. AggressiveSplittingPlugin 插件
在 Webpack 4.0 中，AggressiveSplittingPlugin 是一个新插件。它可以将大型库分成更小的块以提高加载速度。你可以在你的配置文件中使用这个插件：
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ---------------------------------------------
--
--2. Tree Shaking
Tree Shaking 可以大大减小应用程序的代码体积。它依赖于使用 ES6 模块化系统的应用程序。在 Webpack 4.0 中，tree shaking 是默认开启的，所以你可以安全地利用这项功能。
3. 使用 Webpack Dev Server
Webpack Dev Server 是一个内置服务器，可以使用它来提高你的开发体验。它支持热模块替换和动态代码加载，同时它可以在文件发生更改后自动重新编译和重新加载应用程序。你可以通过以下命令安装 Webpack Dev Server：
--- ------- ------------------ ----------
安装之后，你可以在你的配置文件中使用它：
----- ------- - -------------------
-------------- - -
-- ---
---------- -
------------ ---------
---- -----
----- -----
--
-------- -
--- -------------------------------------
--
--结论
Webpack 4.0 带来了许多新特性和性能提升，升级到这个版本需要注意一些细节，并且还有一些有效的优化方案，你可以采用这些方案提高你的应用程序的性能和加载速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f00152e7021665efb101f