How to setup Webpack and Babel for Es6+
Tags: es6, webpack, babel, modules
Published: 2019-12-07 21:17:28

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.