babel and webpack

#Babel and webpack

Babel is Javacsript compiler.

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging ##

In this unit, you modify the existing application and use some new ECMAScript 6 features. You then set up a build environment using Babel and Webpack.

Step 1: using new ECMAScript 6 Features

in app.js with arrow functions and let %!#$!#

Step 2: Setup Babel and Webpack
install webpack and babel
in folder create webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var path = require('path');
 var webpack = require('webpack');
 module.exports = {
     entry: './js/app.js',
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'app.bundle.js'
     },
     module: {
         loaders: [
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 query: {
                     presets: ['es2015']
                 }
             }
         ]
     },
     stats: {
         colors: true
     },
     devtool: 'source-map'
 };

Step 4:

package.json in your favorite code editor. In the scripts section, add a script named webpack that builds your application using Webpack and Babel. The scripts section should now look like this:

1
2
3
4
"scripts": {
    "webpack": "webpack",
    "start": "http-server"
},

  1. Create build folder to the compile version of the application
    1
    The build process will fail if you don’t create the build directory

Step next: Build and Run

  1. npm run webpack

open index.html modified the