Javascript 在具有多个条目的WebpackV4中，我的分割块没有优化，如果我的两个页面包含CoreJS，它们都将得到一个副本

你可以克隆我的最小回购

或者参见下面的代码

第1.js页

导入“核心js”；
console.log（“我是page1”）；

第2.js页

导入“核心js”；
输入“反应”；
导入'react dom'；
console.log（“我是page2”）；

我的网页包配置：

const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
常量entriesFilePath=[
require.resolve（'./src/page1.js'），
require.resolve（'./src/page2.js'），
];
const mode=‘开发’；
const webpackConfig=entriesFilePath.map（（entrieFilePath）=>{
const fileName=path.basename（entrieflepath，path.extname（entrieflepath））；
//文件名应为第1页和第2页
返回{
模式
devtool:“廉价模块源映射”，
条目：{
[文件名]：entrieFilePath，
},
输出：{
文件名：“static/js/[name].js”，
chunkFilename:'static/js/[name].chunk.js'，
},
优化：{
分割块：{
块：“全部”，
},
},
插件：[
//生成一个'index.html'文件，其中包含注入的。
新HtmlWebpackPlugin(
Object.assign(
{},
{
是的，
文件名：`${filename}.html`，
},
),
),
].过滤器（布尔值），
};
});
module.exports=webpackConfig；//我必须导出一个数组，因为在将来，我需要做其他事情。

生成的dist文件夹如下所示：

dist
  /page1.html
  /page2.html
  /static
    /js
      /page1.js.map
      /vendors~page2.chunk.js.map
      /vendors~page1.chunk.js // this includes core-js !!!!
      /page1.js
      /page2.js
      /vendors~page1.chunk.js.map
      /vendors~page2.chunk.js // this includes core-js too !!!!
      /page2.js.map

---

你看，生成的两个区块都包含core js，我如何使我的网页配置足够智能，能够自动将core js或其他常见供应商文件从盒子中分离出来？

你不需要在任何地方导入core js。创建一个.babelrc文件

{
  "presets": [
    [
     "@babel/preset-env",
     {
      "debug": true,
      "useBuiltIns": "usage",
      "corejs": 3
     }
    ]
  ]
}

Instal

@babel/core、@babel/polyfill、@babel/preset env、babel loader

添加到网页包

const optimization = {
   splitChunks: {
      cacheGroups: {
        vendor: {
         test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
         name: 'vendor',
         chunks: 'all',
        }
      }
   }
};

module: {rules: [{
  test: /\.js$/,
   exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
    }
  }
]},

看看我的解决方案，有一个完整的代码。核心js的使用。他只在需要时使用部分聚氟乙烯。

代码中需要的第二个解决方案是使用spliChunks

---

注意：如果您以这种方式导入“core js”；如果使用我的方法，您可以下载整个core js，然后core js只选择所需的内容，并且包更小。

通过将每个文件映射到单个配置，您可以在多编译器模式下使用webpack。这些都算作单独的构建。您必须将入口点作为单个配置的一部分，才能进行代码拆分