Webpack2 node-libs-browser排除？

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

Answer 1

这个问题是因为默认情况下， NodeSourcePlugin 在这里或者在这里为webworker应用其内部的插件NodeSourcePlugin ，如果你有一个模块，甚至引用一个像crypto这样的var Crypto = canUseDom ? null : require("crypto")模块，例如： var Crypto = canUseDom ? null : require("crypto") var Crypto = canUseDom ? null : require("crypto") ，webpack会捆绑一堆大文件来模拟NodeJS。 看看这里提交的问题https://github.com/webpack/webpack/issues/4976 。

解决scheme是避免引用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 。