webpack es6支持配置

  1. Install Babel and the presets:

     npm install --save-dev babel-core babel-preset-es2015
  2. Install babel-loader:

     npm install --save-dev babel-loader
  3. Configure Babel to use these presets by adding .babelrc

     { "presets": [ "es2015" ] }
  4. Modify webpack.config.js to process all .js files using babel-loader.

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

    We are excluding node_modules here because otherwise all external libraries will also go through Babel, slowing down compilation.

  5. Install the libraries you want to use (in this example, jQuery):

     npm install --save jquery babel-polyfill

    We are using --save instead of --save-dev this time, as these libraries will be used in runtime. We also usebabel-polyfill so that ES2015 APIs are available in older browsers.

  6. Edit src/app.js:

     import 'babel-polyfill';
     import cats from './cats';
     import $ from 'jquery';
    
     $('<h1>Cats</h1>').appendTo('body');
     const ul = $('<ul></ul>').appendTo('body');
     for (const cat of cats) {
         $('<li></li>').text(cat).appendTo(ul);
     }
  7. Bundle the modules using webpack:

     webpack
  8. Add index.html so this app can be run:

     <!DOCTYPE html><body>
     <script src="bin/app.bundle.js"></script>
 
 
 
·