Question

我已升级到webpack 2，在树摇动之前我的捆绑包大小已增加。在调查为什么我看起来像bn.js和eliptic这样的大文件时（node-libs-browser的某些依赖项 - 它本身现在是webpack2的依赖项）。有没有办法删除它们或排除它们？在webpack1中，他们没有被添加到我的包中。

Answer 1

问题是因为webpack默认应用其内部插件NodeSourcePlugin here或here for webworker，如果你有一个模块甚至引用像crypto这样的NodeJS模块，即：var Crypto = canUseDom ? null : require("crypto")，webpack将捆绑一堆大文件来模拟NodeJS。请参阅此处提交的问题https://github.com/webpack/webpack/issues/4976。

解决方案是避免使用任何引用NodeJS内部模块的代码，即使它们未在浏览器中使用。

要抓住这些内容，您可以通过覆盖NodeSourcePlugin选项来移除target。

const webpack = require("webpack");
const FunctionModulePlugin = require("webpack/lib/FunctionModulePlugin");

const output = {
  path: process.cwd() + "/build",
  filename: "bundle.[hash].js"
};

{
  target: () => undefined,
  output,
  plugins: [
    new webpack.JsonpTemplatePlugin(output),
    new FunctionModulePlugin(output),
    new webpack.LoaderTargetPlugin("web"),
  ]
}

编辑：使用webpack 3，它现在就像：

一样简单

const webpackConfig = {
  node: false
}

如果您必须只有服务器端的代码并引用NodeJS模块，最好将它们分成自己的模块，并通过browser中的package.json字段导出虚拟副本。

编辑：我在这里写了一篇与此问题相关的博客https://medium.com/walmartlabs/webpack-optimization-a-case-study-92b130334b6c。

Webpack2 node-libs-browser排除？

1 个答案: