如何控制webpack4捆绑块

时间:2018-10-11 11:12:59

标签: webpack webpack-4 webpack-splitchunks

似乎简单的事情不是为我点击...我正在尝试创建三个单独的捆绑包:

(1)node-vendors- [hash] .bundle.js:来自node_modules的东西包 (2)vendor-config- [hash] .bundle.js:捆绑销售商提供的所有脚本,我们在我们的网站上使用config东西。我们在我们网站上使用的每个供应商都提供了一个包含帐户详细信息的摘要 (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”文件夹中引用的每个脚本,还有四个捆绑包。我知道我的optimization部分不正确,但是无论我进行什么更改,都无法正常工作。搜索并尝试大量示例后,无奈之下发布:/

1 个答案:

答案 0 :(得分:1)

您无法通过入口点设置块。 入口点用于避免重复负载。 那里似乎只有一个入口点:./scripts/ours/index.ts

要使用cacheGroups分割vendors.js,在这里您将拥有像npm pakets这样的大块。

mod1.ts:7:18 - error TS2339: Property 'GetFooAsString' does not exist on type 'Object'.

7 Object.prototype.GetFooAsString = function () {
                   ~~~~~~~~~~~~~~