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

Shiva
Shiva
Mar 22, 2018 · 3 min read

Updated dependency with latest version are available here:
https://github.com/zural/react-webpack-starter-kit

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. ☺️

https://kangax.github.io/compat-table/es6/


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 🛠

npm i webpack webpack-cli @babel/core @babel/plugin-proposal-object-rest-spread @babel/preset-env babel-loader -D

👁 👁 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/plugin-proposal-object-rest-spread — which is basically the same as Object.assign using this we will handling (Rest Properties, Spread Properties)
@babel/preset-env — Automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments

After installing you will be getting following configuration in package.json

package.json

Let’s create a very basic HTML, javascript pointing to “ src=’app.js’ “

index.html

Basic index.html with bundle.js src

Create a app.js, add some basic ES6 function into your file.

app.js

ES6 Syntax

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.

to


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

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

Download this complete code:

Running Code Live : https://zural.github.io/webpack/V1.0/

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… 😃

Shiva

Written by

Shiva

Webdeveloper and Designer..! I'm always Interested to learn new technologies. Now, JavaScript making my life more enthusiastic.

More From Medium

Related reads

seetdev
Jun 12, 2018 · 6 min read

504

Related reads

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