Question

我是Webpack 2的新手。当我的捆绑包创建时，一些模块在捆绑包中重复。这是我的webpack配置：

module.exports = {
    node: {
      fs: "empty"
    },
    context: __dirname,
    entry: {
        "vendor": "./src/vendor-bundle-config.ts",
        "app" : "./src/app/app.module"
    },  
    output: {
        filename: '[name].js',
        path: './'
    }   
}

和我的vendor-bundle-config：

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

无论我做什么，rxjs（也许还有其他模块，我还没有进一步检查）在两个捆绑包中都是重复的。奇怪的是，我用一个非常基本的Angular项目来测试这一切 - 它有AppComponent和它。目前唯一引用rxjs的地方是package.json和vendor-bundle-config

我尝试过配置CommonsChunkPlugin但它似乎没有做任何事情。我不确定这是否应该进一步研究。

编辑：这里是CommonsChunkPlugin的配置，我记得最好：

new webpack.optimize.CommonsChunkPlugin({
  name: "commons",
  filename: "commons.js",
})

这是来自webpack文档示例。

我错过了什么/做错了什么？

感谢。

Answer 1

想出来。我在CommonsChunkPlugin配置中缺少minChunks选项。它需要看起来像这样：

new webpack.optimize.CommonsChunkPlugin({
  name: "commons",
  filename: "commons.js",
  minChunks: 2     <-- this is what I was missing
})

Answer 2

插件的name选项是您要与条目分开的块名称。因此，将其更改为vendor。有关详细信息，请参阅code splitting。

Webpack 2跨包复制模块？

2 个答案: