webpack es6支持配置

摘要:webpack es6支持配置...

作者:LoveCode标签:webpack,es6

安装相关支持:

npm install --save-dev babel-core babel-preset-es2015
 npm install --save-dev babel-loader

在项目根目录创建 .babelrc文件,并写入:

 { "presets": [ "es2015" ] }

修改 webpack.config.js:

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


例子,添加jquery

 npm install --save jquery babel-polyfill

编辑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);
 }

添加首页,引入打包好的js:

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



CopyRight © 2017 荒山本的官方网站 粤ICP备16049175号 All Right Service 网站地图(xml) 网站地图(html)