Get more detailed understanding 😍
https://medium.com/@zural143/basic-webpack-4-and-es5-to-es6-transpiler-using-babel-dc66e72c86c6
Installing packages
npm i webpack webpack-cli @babel/core @babel/plugin-proposal-object-rest-spread @babel/preset-env babel-loader -Dindex.html
<!doctype html>
<html lang="en">
<head>
<script src="dist/bundle.js"></script>
</head>
<body>
<h1>Webpack ES6 - Babel and Transpilers </h1>
</body>
</html>app.js
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
[5, 6].map(n => console.log(n));webpack.config.js
const path = require("path");
const webpack = require("webpack");
const webpack_rules = [];
const webpackOption = {
entry: "./app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: webpack_rules
}
};
let babelLoader = {
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
};
webpack_rules.push(babelLoader);
module.exports = webpackOption;