Webpack 是一个模块打包工具，它可以将多个模块打包成一个文件，方便前端开发。在 Webpack 中，我们可以通过配置实现多页面打包，但是在实际使用中，我们可能会遇到打包多余的问题。本文将介绍如何通过配置解决多页面打包出现打包多余的问题。
问题描述
在使用 Webpack 进行多页面打包时，我们通常会在配置文件中设置多个入口，如下所示：
-------------- - -
------ -
------ -----------------------
------ -----------------------
------ ----------------------
--
-- ---
-然后我们会发现，Webpack 在打包时会将所有入口文件都打包到一个文件中，包括我们并不需要的入口文件。这就导致了打包的文件体积过大，加载速度变慢。
解决方法
我们可以通过配置 splitChunks 来解决多页面打包出现打包多余的问题。splitChunks 可以将公共的代码提取出来，避免重复打包，从而减小打包后的文件体积。下面是一个简单的配置示例：
-------------- - -
------ -
------ -----------------------
------ -----------------------
------ ----------------------
--
------------- -
------------ -
------------ -
-------- -
----- ----------
------- ----------
---------- -
-
-
-
-
-- ---
-在上面的配置中，我们将公共代码提取到了一个名为 commons 的文件中。chunks 表示需要提取的范围，这里我们只提取入口文件中的公共代码；minChunks 表示公共代码出现的最小次数，这里我们设置为 2，表示只有当公共代码出现两次或以上时才进行提取。
总结
通过以上配置，我们可以有效地解决多页面打包出现打包多余的问题。在实际使用中，我们还可以根据具体情况进行调整，提高打包的效率和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/661231ced10417a2222ca04b