10

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

4

1 回答 1

14

问题是因为 webpack 默认NodeSourcePlugin 在此处或此处为 webworker应用其内部插件，并且如果您有一个模块甚至引用了 NodeJS 模块crypto，例如 ie: 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。

于 2017-06-01T01:54:42.887 回答