Webpack、babel - node_modules 未从捆绑包中排除

Question

我想弄清楚我的 babel、webpack 配置有什么问题。构建后我的 bundle

中有 node_modules

我尝试了 .babel-rc、terser 和 awesome-typescript-loader 的不同配置（不包括 /node_modules/），但 node_modules 仍在包中。

"webpack": "^4.41.0",

yarn 运行 clean-dist && webpack -p --config=webpack/prod.js --env.production

  mode: 'production',
    entry: './index.tsx',
    output: {
      filename: 'js/menu.min.js',
      path: resolve(__dirname, '../dist'),
      publicPath: '/static/',
    },
module: {
      rules: [{
          test: /\.js$/,
          use: [{
            loader: 'babel-loader',
            options: {
              plugins: env.production ? [] : ["react-hot-loader/babel"]
            }
          }, 'source-map-loader'],
          exclude: [/node_modules/],
        },
        {
          test: /\.(tsx|ts)?$/,
          use: [{
            loader: 'babel-loader',
            options: {
              plugins: env.production ? [] : ["react-hot-loader/babel"]
            }
          }, 
          {
            loader: 'awesome-typescript-loader',
            options: {
              useBabel: true,
              babelCore: "@babel/core"
            }
          }],
          exclude: [/node_modules/]
        },
},
plugins: [
      new Dotenv({
        path: './environment/' + (env.production ? 'prod' : 'dev') + '.env',
        defaults: './environment/dev.env',
        silent: false
      }),

      new CheckerPlugin(),
      new HtmlWebpackPlugin({
        template: 'index.html.ejs',
      })
    ],
   optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          cache: './.build_cache/terser',
          exclude: [/node_modules/],
          parallel: true,
          terserOptions: {
              ecma: 5,
              compress: true,
              output: {
                  comments: false,
                  beautify: false
              }
          }
      })
      ]
    }

.babelrc

{
  "presets": [
    ["@babel/preset-env", {"modules": false}],
    "@babel/preset-react"
  ],
  "env": {
    "production": {
      "presets": ["@babel/preset-env", "minify"]
    },
    "test": {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

.tsconfig

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": ["es5", "es6", "dom"]
    },
    "include": [
        "./src/**/*"
    ],
    "awesomeTypescriptLoaderOptions": {
        "reportFiles": [
            "./src/**/*"
        ]
    }
}

https://i.imgur.com/orcJqAT.png

我希望捆绑包不带 node_modules

Answer 1

当您执行以下操作时：

import sth from 'sth';

并使用 Webpack - 来自 sth 的代码将在您的包或某个块中。这是好事。

exclude不代表不包含——代表loader不处理。

如果您希望您的供应商 (node_modules) 位于单独的块中 - 您可以使用 vendor chunk.

如果你想告诉 Webpack 它不应该捆绑依赖 - 你可以使用 externals.

Webpack、babel - node_modules 未从捆绑包中排除

Webpack, babel - node_modules are not excluded from bundle

typescript

webpack

babeljs

terser