0

我试图弄清楚我的 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

4

1 回答 1

1

当您执行以下操作时：

import sth from 'sth';

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

exclude并不意味着它不会被包含——它意味着加载器不会处理它。

如果您希望您的供应商 ( node_modules) 在单独的块中 - 您可以使用供应商块。

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

于 2019-10-04T10:52:28.400 回答