Question

我正在尝试弄清我的babel，webpack配置有什么问题。构建后，我的包中有node_modules

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

“ webpack”：“ ^ 4.41.0”，

yarn run 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并不意味着将不包含它-意味着加载程序将不对其进行处理。

如果您希望将供应商（node_modules）放在单独的块中，则可以使用vendor chunk。

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

Webpack，babel-包中不排除node_modules

1 个答案: