Webpack 在 bundle 中包含它自己的依赖项

Question

我是 webpack 的新手，我有一个使用 vue cli 的 Vue 项目。在使用 webpack-bundle-analyzer 分析 webpack 包（使用 vue-cli-service build 在生产模式下构建）时，我发现一个特定文件 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（之前是依赖，后来改成devDepenency）添加到最后的bundle中，webpack会包含它自己的依赖？

或者，如果这是正确的行为，请指出任何 docs/resources 解释此行为的内容。

Answer 1

嗯，事实证明这是一个 npm 的东西。早些时候我在 package.json 中将 webpack 作为依赖项。然后我运行 npm uninstall webpack --save 然后又做了 npm install webpack --save-dev 以使其成为开发依赖项。事实证明这还不够。只有在我删除 node_modules 文件夹然后再次安装 npm 后，我才停止在我的包中获取 webpack 依赖项。

Answer 2

有关我如何找到问题所在框架的提示。在 Webpack 配置中，我设置了 {node: false} 然后构建了生产代码。 Webpack 应该标记有问题的框架。对于最初为服务器端编写的代码来说，这可能是一个问题，并且期望某些包可用并且不会出现在 package-lock.json.

上

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

快乐的未使用代码破坏！

Answer 3

我遇到了一个类似的问题，我无法找到为什么要导入名为 bn.js、elliptic 等的库。

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

如果您发现自己处于无法在代码库中找到特定库的导入语句的情况，请执行以下操作：

npm ls libname

在某些情况下，某些库会在内部导入这些方法，因此导致您的供应商包膨胀。在 generate-password 的情况下，它是从节点导入加密模块。整个模块最终出现在供应商包中，因为 generate-password 使用了 crypto 模块中的一个函数。

我如何避免导入加密：

已将生成密码源代码作为实用程序复制到我的代码库中。
用特定的 npm version of the randomBytes.
删除 node_modules 并使用 yarn/npm 重建。

Webpack 在 bundle 中包含它自己的依赖项

Webpack including its own dependencies in bundle

javascript

npm

webpack

vue.js

webpack-bundle-analyzer