Webpack compiling the ES6 plugin Babel-loader

1, installation Babel-loader

Reference: http://babeljs.io/docs/setup/#installation

Enter the project directory to perform the installation naming:

NPM Install--save-dev babel-loader babel---save-dev babel-preset-latest

Babel-preset-latest is all es2015, es2016, es2017 are all included together.

2. Project structure:

The App.js code is:

Import layer from './components/layer/layer.js 'function() {    const NUM  =1 ;    alert (NUM);    Console.log (Layer)}new App ()

3. webpack.config.js configuration file is

varHtmlwebpackplugin = require (' Html-webpack-plugin ')); Module.exports={entry:'./src/app.js ', Output: {path: __dirname+ '/dist ', FileName:' Js/[name].js '}, module: {loaders: [{ test: /\.js$/,  // The following directories do not handle exclude:/node_modules/,  // handle only the following directories include:/src/, Loader: "babel-l                    Oader ",  // Configure the Target Runtime Environment (environment) to automatically enable the required Babel plugin query: { Presets: [' latest ' ] }}]}, plugins: [Newhtmlwebpackplugin ({Template:' Index.html ', FileName:' Index.html '        })    ]}

4. Execution of Orders

NPM Run Webpack

5. Post-editing results

Webpack compiling the ES6 plugin Babel-loader