Webpack, babel, corejs - generate unnecessary code

301 views Asked by At

I would need to explain how to set up babel in combination with a webpack for transpiling and polyfilling JS. I also need to target the IE 11 browser.

Browserlist settings

"browserslist": [
    "defaults",
    "> 0.5%",
    "IE 11"
  ]

Babel settings

module.exports = {
  sourceType: "unambiguous",
  presets: [
    [
      "@babel/preset-env",
      {
        debug: true,
        useBuiltIns: "usage",
        corejs : {
          version : "3",
        }
      }
    ]
  ],
}

Webpack settings

// Path
const path = require("path");

module.exports = {
  mode: "production",
  context: path.resolve(__dirname, 'js'),
  entry: {
    'app': './app.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        loader: "babel-loader",
        exclude: [
          /node_modules/,
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js"],
    modules: [
      'node_modules',
    ],
  },
  optimization: {
    minimize: false
  }
};

app.js

const app = typeof undefined;

app1.bundle.js
npm run build - generate 2970 lines of code only for one line in app.js
91kb unminifed
26kb minifed
Screenshot

What am I doing wrong? Well thank you

0

There are 0 answers