Webpack2 节点库浏览器排除？答案

【问题标题】：Webpack2 node-libs-browser exclude?Webpack2 节点库浏览器排除？
【发布时间】：2017-03-20 21:53:47
【问题描述】：

我已经升级到 webpack 2，并且在 tree-shaking 之前我的包大小增加了。在调查为什么我似乎有像bn.js 和eliptic 这样的大文件（node-libs-browser 的一些依赖项——它本身现在是 webpack2 的依赖项）时。有没有办法删除这些或排除它们？在 webpack1 中，它们没有被添加到我的包中。

【问题讨论】：

现在同样的问题；你有没有找到解决办法？即使在树摇动之后，我的块大小也要大得多（我的供应商块大约大 25%）。
我们发现包含的文件是 webpack polyfills 的结果（bn.js 被包含为使用节点加密的 polyfil），它们似乎比 webpack1 包含的更大（我猜)
啊，是的，我知道它们是 webpack polyfill，但我不明白为什么现在要包含其他的。 Webpack 应该只包含它根据需要检测到的 polyfill，并且它会引入许多根本不需要的 polyfill。我正在使用 NormalModuleReplacementPlugin 来剔除那些我知道我不需要的 node-noop 解决了大小问题，但我可能会剔除错误的那些 - 我宁愿 webpack 实际上只抓取它需要什么，而不是全部。
我也看到了这个......当然，即使不需要，我们也不应该为每个应用提供椭圆曲线库？
我也有同样的问题，你找到解决办法了吗？

标签： node.js webpack webpack-2

【解决方案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 内部模块的代码，即使它们没有在浏览器上使用。

要捕获这些，您可以通过覆盖 target 选项来删除 NodeSourcePlugin。

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 模块，最好将它们分离到自己的模块中，并通过 package.json 中的 browser 字段导出一个虚拟副本。

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

【讨论】：