Webpack2 node-libs-browser排除？

Question

我已经升级到webpack 2,在树摇动之前我的包大小增加了.在调查为什么看来我得等大文件bn.js和eliptic(节点库浏览器的一些依赖-这本身就是现在webpack2的依赖).有没有办法删除它们或排除它们？在webpack1中,他们没有被添加到我的包中.

Answer 1

问题是因为默认情况下webpack NodeSourcePlugin 在这里或这里为webworker应用它的内部插件,如果你有一个甚至引用NodeJS 模块的模块,例如crypto: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.