[Javascript] Webpack loaders, Source Maps, and ES6

Using ES6

To use ES6, we need loader.

1. Modify webpack.config.js File:

Module.exports = {    './index.js ',    output: {        ' bundle.js ',        path: __dirname    },    module: {        loaders: [            /\.js$/, loader: ' Babel ', exclude: '/node_modules/'}        ]    }};

We Add Module property, which are an object. We define the Loaders property Here which are an array of objects.

• Test: It is a regex, would include all the files which match the regex. In the exmaple, we say this "include all the JS files".
• Loader: Need to define the ES6 loader for this, and which is ' Babel '. For this, you need to the install it by:

NPM Install Babel-loader

• exclude: Tell which files you don ' t want to include.

2. change file using ES6 style:

// Lam-dom-binding.js  default  {  bindels (El1, El2) {    el1.addeventlistener (' KeyUp ', () =  El2.value = el1.value)    el2.addeventlistener (' KeyUp ', () =  El1.value = el2.value)  }}

3. Run:webpack--watch

Source Map

One useful thing is see the source map (means see lam-dom-binding.js map to which part in the Bundle.js). The reason it is useful are because when we open the Devtool, we just saw a big bundle.js file:

Which is not a useful for debugging.

To enable the source map, we need to add one property in Webpack.config.js:

Module.exports = {    './index.js ',    output: {        ' bundle.js ',        path: __dirname    },    //init compile fast, recompile also very fast    module: {        loaders: [            /\.js$/, loader: ' Babel ', exclude: '/node_modules/'}        ]    };

After that, run ' Webpack--watch ' again. We can see from the Devtool, it show the ' webpack://'

But the can see that the code is still ES5 style, if you want what coded, instead of using 'eval', you can use 'eval-source-map'.

Module.exports = {    './index.js ',    output: {        ' bundle.js ',        path: __dirname    },    ' Eval-source-map ',    module: {        loaders: [            /\.js$/, loader: ' Babel ', exclude: '/ Node_modules/'}}    };

This can is a little bit longer time to compile and then you can see the code you just Worte:

Both ' eval ' and ' Eval-source-map ' is recommended using in devtime.

If you want to use in production code:

Module.exports = {    './index.js ',    output: {        ' bundle.js ',        path: __dirname    },    ' Source-map ',    module: {        loaders: [            /\.js$/, loader: ' Babel ', exclude: '/node_ Modules/'}}    };

It'll add a. map file for you. That file was not actually loaded into the browser until the DevTools was brought up.

[Javascript] Webpack loaders, Source Maps, and ES6