How to setup Webpack and Babel for Es6+

#es6 #webpack #babel #modules

Webpack and babel are two of the most essential tools for modern JavaScript developers. when used together they constitute a very powerful weapon in our arsenal. in this post i'll be going over webpack4 and babel7 configuration.

Before we start please create a folder for the project and run:

npm init

to configure your package.json file

Webpack is a static module bundler for modern JavaScript applications. Basically it makes all your JavaScript files know about each other by bundling them into one file. To install webpack run:

npm install webpack --save-dev

This tells npm to install the latest version of webpack as a development dependency, with webpack installed we create a file webpack.config.js and fill it with the following contents:

const path = require('path');

module.exports = {
    entry: './src/js/index.js', //location of your main js file
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'  // where js files would be bundled to
   }
 }

Then we need a way to communicate with webpack through the command line and we use the webpack commandline for that and you guessed it we have to install it with npm, now run

npm install webpack-cli --save-dev

we also have to install webpack-dev-Server to serve our web app on a port, finally we can install the html-webpack-plugin

npm install webpack-dev-server html-webpack-plugin  --save-dev

now we update our webpack.config.js file to look like this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  devServer: {
    contentBase: './dist' //where contents are served from
  },
  plugins: [
    new HtmlWebpackPlugin({
       filename: 'index.html', // name of html file to be created
       template: './src/index.html' // source from which html file would be created
    })
]
}

finally change the scripts in your package.json to

"scripts": {
 "dev": "webpack --mode development",
 "build": "webpack --mode production",
 "start": "webpack-dev-server --mode development --open"
}

running the dev script above bundles your js files, running the build script above bundles and minifies your js files and running the start script serves up your app on a port.

npm run dev       //running dev script
npm run build    //running build script
npm run start     //running Start script

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
To get all the requirements needed for babel run:

npm install @babel/core @babel/preset-env babel-loader --save-dev

also run

npm install @babel/runtime core-js@3 --save

now we have all the requirements to run babel, we create a .babelrc file and update it contents to look like

{
"presets": [
    ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": "3",
        "targets": {
            "browsers": [
                "last 5 versions",
                "ie >= 8"
            ]
        }
    }]
]
}

then update the webpack.config.js file to this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
},
devServer: {
    contentBase: './dist'
},
plugins: [
    new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html' 
    })
],
module: {
    rules: [
        {
            test: /\.js$/, //using regex to tell babel exactly what files to transcompile
            exclude: /node_modules/, // files to be ignored
            use: {
                loader: 'babel-loader' // specify the loader
            } 
        }
    ]
}
}

With all of that done, run the dev or build script and then run the start script; webpack and babel are now set up successfully. Have fun using modular programming and also using Es6+ syntax in your app.