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