从Webpack捆绑包中排除特定的包

Question

我正在尝试找到一种方法，从我的Webpack捆绑包中排除特定的子依赖包。我尝试了许多方法，最近的尝试是滥用externals选项，例如：

externals: [
    function externals(context, request, callback) {
        if (
        context.includes('ui-lib/node_modules/react-dom/') ||
        context.includes('ui-lib/node_modules/d3/') ||
        context.includes('ui-lib/node_modules/lodash/')
        ) {
        return false;
        }
        callback();
    },
],

如果没有成功，有其他方法可以实现吗？

我有一个供应商捆绑包，看起来像这样：

我想排除node-modules下的重复包，例如react-dom。

入口点

entry: {
  app: ['babel-polyfill', path.join(__dirname, './../index.dev.js')],
  vendor: ['react', 'react-dom', 'd3'],
},

公共块

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  filename: 'vendorbundle.js',
  chunks: ['app'],
  minChunks(module) {
    return module.context && module.context.includes('node_modules');
  },
}),

- Avraam Mavridis

Answer 1

为了以后参考，使用React的外部库需要将其声明为peerDepedency。这样做可以删除一个react-dom实例：

- Avraam Mavridis

Answer 2

您应该能够在加载器配置中排除特定的包：

  {
    test: /\.js$/,
    exclude: [/node_modules\/SUBDEPENDENCY_PATH/]
  },

更新：

啊，好的，这样就有道理了。在这种情况下，我会为该软件包创建一个单独的代码块。然后使用HTMLWebpackPlugin，你可以告诉它忽略该代码块，不将其引入应用程序中：

entry: {
  sub: ["subdependency"],
  app: "./entry"
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "sub",
    filename: "sub.js"
  }),
  new HtmlWebpackPlugin({
    excludeChunks: ['sub']
  })
]

更新2：

听起来你想要的是去重依赖项。你不能使用Webpack来做这个，你需要使用npm或yarn：

例如，考虑以下依赖关系图：

a
+-- b <-- depends on c@1.0.x
|   `-- c@1.0.3
`-- d <-- depends on c@~1.0.9
    `-- c@1.0.10

在这种情况下，npm-dedupe会将树转换为：

a
+-- b
+-- d
`-- c@1.0.10

- Chase DeAnda

---

这将使其不被加载器解析，而不是不包含在捆绑包中。 - Avraam Mavridis

@AvraamMavridis 更新了答案。感谢您的明确表述。 - Chase DeAnda

我建议先将主要的依赖关系分块，仅在需要时才进行条件加载。 - Chase DeAnda

应该是开箱即用的。 - Avraam Mavridis

@AvraamMavridis 更新了答案，并提供了去重依赖项的说明。 - Chase DeAnda