Webpack将其自身依赖项包含在捆绑包中。

Question

我对webpack相当新，我有一个使用vue cli的Vue项目。在使用webpack-bundle-analyzer分析使用vue-cli-service build构建的生产模式webpack包时，我发现其中一个特定文件bn.js被多次包含在包中。当运行npm ls bn.js时，我发现它的父级依赖关系是webpack本身。

`-- webpack@4.44.1
  `-- node-libs-browser@2.2.1
    `-- crypto-browserify@3.12.0
      +-- browserify-sign@4.2.1
      | +-- bn.js@5.1.3
      | +-- browserify-rsa@4.0.1
      | | `-- bn.js@4.11.9
      | +-- elliptic@6.5.3
      | | `-- bn.js@4.11.9
      | `-- parse-asn1@5.1.6
      |   `-- asn1.js@5.4.1
      |     `-- bn.js@4.11.9
      +-- create-ecdh@4.0.4
      | `-- bn.js@4.11.9
      +-- diffie-hellman@5.0.3
      | +-- bn.js@4.11.9
      | `-- miller-rabin@4.0.1
      |   `-- bn.js@4.11.9
      `-- public-encrypt@4.0.3
        `-- bn.js@4.11.9

我的问题是，当将webpack添加为项目的devDependency（之前它是dependency，然后我将其更改为devDependency）时，为什么webpack在最终打包中包含自己的依赖项？如果这是正确的行为，请指向任何解释此行为的文档/资源。

- ravi kumar

---

我曾经遇到过这个问题，由于我直接导入了节点crypto模块或者使用间接导入节点crypto模块的Node包。这个问题很难解决，因为我无法确定哪个依赖项是造成这个问题的真正原因。我尝试了很多次才最终用适合浏览器端的版本取代了所有需要crypto的地方。感谢tweetnacl和jsrsasign @kjur。 - domoarigato

Answer 1

事实证明这是一个npm问题。早些时候我在package.json中有webpack依赖项。然后我运行了npm uninstall webpack --save，然后再次运行npm install webpack --save-dev以使其成为开发人员依赖项。结果发现这还不够。只有在删除了我的node_modules文件夹并再次运行npm install后，我才停止获取webpack依赖项。

- ravi kumar

Answer 2

一个发现哪个框架有问题的提示。在 Webpack 配置中，我设置了 {node: false} 然后构建生产代码。Webpack 应该会标记有问题的框架。这可能对最初为服务器端编写并期望某些包可用但不会显示在 package-lock.json 中的代码造成问题。

如果您正在使用像 create-react-app 这样的东西，则可以使用 react-app-rewired 这样的框架来自定义 Webpack 配置。

祝找到未使用代码！

- David Chu

Answer 3

我遇到了一个类似的问题，即无法找到导入bn.js、elliptic等库的原因。

事实证明，这是因为我们使用了一个名为[generate-password][1]的库，该库 导入 crypto，因此我看到了许多从未导入的模块。请查看下面的图像。

[1]: https://www.npmjs.com/package/generate-password

如果你发现自己在代码库中找不到特定库的导入语句，只需执行以下操作：

npm ls libname

有些情况下，会有一些库在内部导入这些方法，从而导致您的供应商捆绑包变得庞大。 在generate-password的情况下，它从node中导入了crypto模块。整个模块最终都包含在供应商捆绑包中，因为generate-password使用了crypto模块的一个函数。

我是如何避免导入crypto的：

1. 将generate-password源代码复制到我的代码库中作为一个工具。
2. 用特定的npm版本的randomBytes替换crypto库中的randomBytes函数。
3. 删除node_modules并使用yarn/npm重新构建。

- Arthur