如何控制 webpack 4 bundle 块

Question

看起来很简单的是我没有点击...我正在尝试创建三个单独的捆绑包：

(1) node-vendors-[hash].bundle.js：来自 node_modules 的一堆东西 (2) vendor-config-[hash].bundle.js：供应商提供的所有脚本包，我们将我们的站点与配置内容一起使用...想想多种服务，例如 Google Analytics；我们在我们网站上使用的每个供应商都提供了一个包含帐户详细信息的片段 (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 一个，但是 "vendors" 文件夹中引用的每个脚本还有 4 个。我知道我的 optimization 部分不正确，但无论我如何更改，我都无法正常工作。在搜索并尝试了大量示例之后，绝望地发帖：/

Answer 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('@', '_')}`;
     },
   },

如何控制 webpack 4 bundle 块

HOWTO control webpack4 bundle chunks

webpack

webpack-4

webpack-splitchunks