带有polyfill包的Webpack隐式供应商包

Question

我想建三捆:main.js,vendor.js和polyfill.js.polyfill.js文件应包含polyfill.js文件中定义的模块.vendor.js应该通过提取从npm(node_modules)导入的所有依赖项来动态创建文件.最后main.js应该包含而不是polyfill和vendor模块,这本质上是我的应用程序代码.

polyfill.js

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

main.js

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Store } from '@ngrx/store';

@NgModule([
    imports: [...]
])
class AppModule {
}

我写了下面的webpack配置,但总是得到以下错误:

"CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (main)",
    "CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (vendor)"

webpack.config.prod.js

{
  entry: {
    polyfill: './polyfill.ts',
    main: './main.ts'
  },
  output: {
    publicPath: options.assetPath
  },
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        const check = module.context && module.context.indexOf('node_modules') !== -1;        
        module.originalChunkNames = module.chunks.map(chunk=> chunk.name);
        return check;
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'polyfill',
      chunks: ['vendor'],
      minChunks: ({ originalChunkNames }) => originalChunkNames.includes('polyfill'),
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['main', 'vendor', 'polyfill'],
      minChunks: Infinity
    })
  ]
}

这里我想做的是动态创建vendor包,包括node_modules我在源文件中导入的所有内容.polyfill通过包含polyfill.js文件中明确定义的所有模块来创建包.最后main一捆.

我已经尝试了很多来自webpack github repo的例子,但是没有一个能帮助我实现上面提到的东西

Answer 1

我创建了一个Github 存储库来演示工作示例。

以下是实现此类输出的 webpack 配置的重要部分：

{
  entry: {
    polyfill: 'polyfill.ts',
    main: 'main.ts'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      chunks: ["main"],
      minChunks: function(module) {
        const check =
          module.context && module.context.indexOf("node_modules") !== -1;
        module.originalChunkNames = module.chunks.map(chunk => chunk.name);
        return check;
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "polyfill",
      chunks: ["vendor"],
      minChunks: function({ originalChunkNames }) {
        return originalChunkNames.includes("polyfill");
      }
    }),
  ]
}