如果你使用 Webpack 进行前端项目的打包，那么可能会遇到这样一个警告：
WARNING in configuration The 'CommonsChunkPlugin' plugin is deprecated. Use 'optimization.splitChunks' instead.
这是由于 Webpack 在版本升级中弃用了 CommonsChunkPlugin 插件，官方推荐使用 optimization.splitChunks 进行代码拆分。
本文将会详细介绍如何迁移过程中遇到的问题，并提供示例代码，以供学习使用。
CommonsChunkPlugin 与 optimization.splitChunks 的区别
在使用 Webpack 进行代码拆分时，CommonsChunkPlugin 插件是很常见的选择。它主要用于将公共的代码分离出来，避免重复打包。
而 optimization.splitChunks 则是 Webpack 4 新增的特性，它也会将代码进行拆分，但它会更智能地选择需要拆分的代码块，减少代码冗余，同时支持多入口功能。
迁移步骤
- 删除原有的 CommonsChunkPlugin 插件配置
将原来的 CommonsChunkPlugin 插件配置删除，并在 Webpack 配置文件中加入新的 optimization.splitChunks 配置。
示例代码：
-- -------------------- ---- -------
-- --
-------- -
--- -------------------------------------
----- --------
--
-
-- --
------------- -
------------ -
------- ------
----- --------
-
-- 更新依赖
确保 Webpack 升级到 4.x 版本，并更新其他依赖库，如 webpack-cli 和 webpack-dev-server
- 测试构建结果
根据新的配置进行一次构建，并检查构建结果是否符合预期。
注意事项
- 如果项目使用了多个入口文件，需要对 optimization.splitChunks 进行适当的配置，以避免重复打包。
- 如果项目使用了自定义的公共代码块名称，需要进行相应的调整。
总结
本文介绍了如何解决 Webpack 打包出现 CommonsChunkPlugin deprecation 警告的问题，并提供了具体的迁移步骤和示例代码。希望能够帮助到广大前端工程师，在升级 Webpack 版本时更加顺利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490088848841e9894e2fef7