如何控制webpack4包块

Question

似乎很简单的是不为我点击..。我试图创建三个单独的包：

(1)节点-供应商-hash.bundle.js:来自node_modules (2) provided config -hash.bundle.js:由供应商提供的所有脚本的包，我们使用我们的站点与配置材料.想一想像这样的多种服务；我们在站点上使用的每个供应商都提供了一个包含帐户详细信息的代码片段(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部分是不正确的，但是不管我做了什么改变，我都不能让它工作。在搜索和尝试了大量的例子之后，绝望地发帖:/

Answer 1

您不能通过入口点设置块。用来避免重复加载的入口点。在那里，您似乎只有一个入口点：./script/our/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('@', '_')}`;
     },
   },