如何控制 webpack 4 bundle 块答案

【问题标题】：HOWTO control webpack4 bundle chunks如何控制 webpack 4 bundle 块
【发布时间】：2018-10-11 11:12:58
【问题描述】：

对我来说似乎很简单的事情是不点击...我正在尝试创建三个单独的捆绑包：

(1) node-vendors-[hash].bundle.js：来自 node_modules 的东西包 (2) vendor-config-[hash].bundle.js：由供应商提供的所有脚本的捆绑包，我们使用我们的网站进行配置……想想 Google Analytics 等多种服务；我们在网站上使用的每个供应商都提供包含帐户详细信息的 sn-p (3) 我们的自定义脚本

无论配置如何，我都会为上面 #2 类别中的每个源文件获取一个包。

const coreVendorSetupFiles = {
  vendor1: './scripts/vendors/vendor1/index.js',
  vendor2: './scripts/vendors/vendor2/index.js',
  vendor3: './scripts/vendors/vendor3/index.js',
  vendor4: './scripts/vendors/vendor4/index.js',
  ourCode: './scripts/ours/index.ts
};

module.exports = {
  entry: coreVendorSetupFiles,
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendorConfig: {
          test: /[\\/]vendors[\\/]/,
          name: 'vendor-config'
        }
      }
    }
  },
  output: {
    path: path.resolve(__dirname, './../dist'),
    filename: '[name].bundle-[hash].js'
  }
};

我每次得到的是 6 个捆绑包……上面的 #1 和 #3 一个包，但“供应商”文件夹中引用的每个脚本还有 4 个附加包。我知道我的optimization 部分不正确，但无论我进行什么更改，我都无法使其正常工作。在搜索并尝试了大量示例之后，绝望地发布：/

【问题讨论】：

您的供应商是否从 index.ts 开始在您的依赖关系树中的某个位置导入？
它们不是由任何东西导入的。我的目标是简单地将 /vendors/ 中的四个文件组合在一个包中。相反，他们每个人都在自己的捆绑中。
我想我看到了问题......通过在条目中列出每个条目，webpack 正在为每个条目文件创建一个包。相反，我应该有一个文件将它们全部导入......现在我看到了想要的结果......
是的，没错。当入口点上有一个对象时，webpack 将它们视为不同的块

标签： webpack webpack-4 webpack-splitchunks

【解决方案1】：

您不能通过入口点设置块。用于避免重复加载的入口点。那里似乎只有一个入口点：./scripts/ours/index.ts

要拆分vendors.js 使用cacheGroups，在这里你将拥有与npm pakets 一样多的块。

 cacheGroups: {
   vendor: {
     test: /[\\/]node_modules[\\/]/,
     vendorname(v) {
       var name = v.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
       return `npm.${name.replace('@', '_')}`;
     },
   },

【讨论】：