Webpack, babel - node_modules are not excluded from bundle

Question

I'm trying to figure out whats wrong with my babel, webpack configuration. After build I have node_modules inside my bundle

I tried different configuration of .babel-rc, terser and awesome-typescript-loader (exclude /node_modules/) but node_modules are still inside the bundle.

"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

I expect the bundle with be without node_modules

madflow madflow · Accepted Answer · 2019-10-04T10:52:28

When you do a:

import sth from 'sth';

and use Webpack - the code from sth will be in your bundle or in some chunk. This is a good thing.

exclude does not mean that it will not be included - it means that the loader will not process it.

If you want your vendors (node_modules) in a seperate chunk - you can use a vendor chunk.

If you want to tell Webpack that it should not bundle a dependency - you can use externals.

Webpack, babel - node_modules are not excluded from bundle

1 Answers