IT技术 - 从 Webpack 中的 bundle 中排除特定的包 - 吾爱随笔录

从 Webpack 中的 bundle 中排除特定的包

IT技术 reactjs webpack

2021-04-28 03:33:51

我试图找到一种方法来从我的 Webpack 包中排除特定的 subdepedency 包。我尝试了很多方法，我最近的尝试是（ab）使用外部选项，例如：

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();
    },
],

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

我有一个供应商包，看起来像：

我想排除节点module下的重复包，例如 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');
  },
}),

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

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

其它你可能感兴趣的问题

上一篇在 React 中使用 Firebase 进行 Google 登录以进行 chrome 扩展下一篇运行 Jest 测试时出现意外的令牌导入错误