如何确保 node_modules 不包含在捆绑包中

Question

我正在使用 webpack-bundle-analyzer 来识别可能需要优化的包。我的 webpack 配置不包括 node_modules

webpack.config

  config.module = {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: [
        /node_modules/,
        /firebase-functions/,
        /tests/
      ],
      use: {
        loader: 'babel-loader'
      }
    },
    ...
   }]
 }

当我查看我的捆绑包的表示时，我仍然可以看到 node_modules，这是否意味着 node_modules 包含在我的捆绑包中？

我先运行yarn run build:stats生成compilation-stats.json然后yarn run analyse

package.json

  "scripts": {
    "build:prod": "cross-env NODE_ENV=production webpack -p --env production",
    "dev-server": "cross-env NODE_ENV=development ANALYSE_BUNDLE=no webpack-dev-server --host 127.0.0.1 --port 8080",
    "dev-server-analyse": "cross-env NODE_ENV=development ANALYSE_BUNDLE=yes webpack-dev-server --host 127.0.0.1 --port 8080",
    "build:stats": "cross-env NODE_ENV=production webpack --profile --json --env=production > compilation-stats.json",
    "analyse": "webpack-bundle-analyzer compilation-stats.json dist",

我也曾尝试指示 </code> 不包括 <code>node_modules

webpack.config

new BundleAnalyzerPlugin({
  excludeAssets: ['node_modules'],
  statsOptions: {
    exclude: /node_modules/
  }
})

来自 webpack-bundle-analyzer 的结果 那么，node_modules 是否包含在我的捆绑包中，还是我只是做错了什么？

亲切的问候/K

Answer 1

是的。 WebPack 规则只是描述要使用的加载程序链。以任何方式包含纯 JS 代码。您可以从捆绑包中排除供应商代码的原因有很多，例如：

重建时间优化
最佳缓存
等等

WebPack 提供不同的方式来做到这一点：

dll plugin
externals
可能是别的东西

WebPack 有默认值 chunk optimizator。在大多数情况下，这足以获得良好的结果。只有当您遇到一些实际问题并了解您想要切碎什么时，您才应该进行一些其他手动优化。

如何确保 node_modules 不包含在捆绑包中

How to make sure node_modules is not included in bundle

bundle

reactjs

webpack

webpack-bundle-analyzer