时间戳

首页 > 解决方案 > HOWTO 控制 webpack4 包块

webpack - HOWTO 控制 webpack4 包块

问题描述

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

(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 一个包，但“供应商”文件夹中引用的每个脚本还有 4 个附加包。我知道我的optimization部分不正确，但无论我改变什么，我都无法让它工作。在搜索并尝试了大量示例之后，绝望地发布：/

标签： webpackwebpack-4webpack-splitchunks

解决方案

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

推荐阅读