003_webpack with Babel to turn Es6 into ES5

Today contacted Webpack, the first time to use Webpack to transcode, unexpectedly confused on success, haha.

The following procedure is attached

Create a folder, initialize it, first the global installation of Webpack

NPM Install Webpack--save-dev  

Then install Babel

NPM Install--save-dev babel-core babel-preset-es2015  npm Install--save-dev Babel-loader  

Perform the installation in the current folder, and then create two folders a src as the source folder, a bin, to save the list of generated folders

Create a file within the SRC folder App.js, which writes the ES6 code that is not fully supported by the browser now

Let A = 111;  Let B = 222;  var xxx = (c,d) = C*d;  Console.log (XXX (A, b));  

Then create a file named Webpack.config.js in the root directory

Module.exports = {        entry: './src/app.js ',        output: {            path: __dirname,            filename: './bin/app.bundle.js ' ,        },        module: {            loaders: [{                test:/\.js$/,                exclude:/node_modules/,                loader: ' Babel-loader '            }]        }    }    

Then create a file for the Babel call, named. BABELRC

Inside write

{"Presets": ["es2015"]}  

Then open cmd in the current directory,

Run command Webpack

If it appears green, it proves successful.

And then go to the Bin directory and find App.bundle.js, and there's a code underneath that.

function (module, exports) {    "use strict";    var a = 111;  var b = 222;  var xxx = function xxx (c, d) {    return c * D;  };  Console.log (XXX (A, b));  

#copy_url: http://blog.csdn.net/qq_30100043/article/details/53402618

003_webpack with Babel to turn Es6 into ES5