I'm really new to Webpack + Babel and wanted to give this a try on my project, however when I run my "npm run build" to run the webpack.production.config.js file I've included, it doesn't seem to be creating the necessary polyfills for IE11 in my scripts.
I've included one of the JS files I'm trying to polyfill, my package.JSON, .babelrc and webpack.production.config.js below:
** package.JSON **
{
"name": "nutrifast",
"version": "1.0.0",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.production.config.js"
},
"author": "Jonas Schmedtmann",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.0.7",
"webpack": "^5.10.1",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
** webpack.production.config.js **
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'main.min.js',
path: path.resolve(__dirname, './dist'),
publicPath: ''
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-env' ]
}
}
}
]
}
}
** .babelrc **
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
** ./src/main.js **
// Header Menu
{
const menuTrgr = document.querySelector("a[data-menu-toggle]");
const menuToggle = function() {
menuTrgr.classList.contains("active") ? menuTrgr.classList.remove("active"): menuTrgr.classList.add("active");
};
menuTrgr.addEventListener("click", menuToggle);
}
// Populates Basket from local
if(reset_basket !== 1) {
(function() {
if(localStorage) {
// Populates the meals and totals
const totals = JSON.parse(localStorage.getItem("totals"));
if(totals) {
const basketTotal = totals.mealAmount > 0 ? totals.mealAmount : 0;
document.getElementById("basket-total").innerHTML = `<b>Meals</b> <i>${basketTotal}</i>`;
}
}
})();
}
If someone could point me in the right direction, it would much appreciated.