Webpack 5: configuration + ES6 to ES5 transpiler using babel loader

Shiva
Shiva
Mar 22, 2018 · 4 min read

Updated dependency with latest version are available here:
Master : https://github.com/zural/react-webpack-starter-kit
🆕 v5.x.x : https://github.com/sivaraj-v/react-webpack-starter-kit/tree/webpack-5.x.x
v4.x.x : https://github.com/sivaraj-v/react-webpack-starter-kit/tree/webpack-4.x.x

Lets us understand the issue about the ES6 and ES5 script, we face in a browser to browser, and we will resolve it step by step. 😃


Before Converting ES6 → ES5 Code 😥
After Converting ES6 → ES5 Code using webpack babel loader 😍

Are you getting a lot of error in configuring webpack? 😰
Even I faced some configuration issue in the beginning. 😂

🚁 Let’s start building webpack configuration from the scratch.

Installing packages 🛠

Dev Dependency: 
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
Dependency:
npm i react react-dom --save

👁 👁 Always get some basic information about your installing modules:
webpack — webpack is a bundler for modules
webpack-cli — It captures options and sends them to webpack compiler (recommended)
@babel/core — Babel compiler core.
@babel/preset-env — Automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments

Follow the file structure here : https://github.com/sivaraj-v/react-webpack-starter-kit

Lets begin our webpack configuration from here…. 😄

  • It Provides path utilities for working with file and directory paths
const path = require(“path”);
  • Similarly, we are calling webpack from webpack module
const webpack = require("webpack");
  • After importing your webpack, we need to configure the entry point and output folder/file
module.exports = {
entry: "./app.js", // Entry File
output: {
path: path.resolve(__dirname, "dist"), //Output Directory
filename: "bundle.js", //Output file
}};

Configure your package.json

"build": "webpack --mode production"

Run your script in the respective directive

npm run build

You will be getting a ‘dist’ directory with bundle.js file.

Replace the line in index.html

From

<script src=”app.js”></script>

To

<script src=”dist/bundle.js”></script>

Run your index.html in various browser such as Chrome,Firefox and Edge Browser, if your getting error message means the browser is not accepting ES6 javascript

So we have to convert our ES6 into ES5 script format.
How ??
We have use babel for converting ES6 to ES5.

First will get some clear picture of what we are trying to archive.
Let me show the difference between the ES6 conversion and ES5 Conversion using Webpack.

ES6 bundle.js generated without babel loader

to

✔️ ES5 bundle.js generated using babel loader.

Let’s Archive this…


Now will go for basic babel configuration

{
test: /\.js$/, //Regular expression
exclude: /(node_modules|bower_components)/,//excluded node_modules
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"] //Preset used for env setup
}
}
}

Finally your webpack.js file will be looks like this.

webpack.config.js

babelrc file we are used for setting env setup

Ref : https://babeljs.io/docs/usage/babelrc/

.babelrc

Now all your setup are done… ! 😀

npm run build

You will be getting dist/bundle.js, configure this file in index.html

Bundle Overview

Now your code is ready to run in all the browser. 🤣

Download this complete code:

In the Upcoming blog, we are going to see more about SASS, CSS, HTML configuration and it will extend to Progressive Web App (PWA) +🎁 surprise gift feature… Stay connected via GitHub and Medium blog… 😃

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store