使用webpack打包ES6代码

安装nodejs

根目录下运行

 npm init

根据提示输入项目相关信息，然后运行：

npm install

安装webpack

在项目根目录下运行

npm install webpack --save-dev

安装babel loader 和 转码规则

在根目运行命令：

npm install babel-loader --save-dev
npm install babel-preset-es2015 --sava-dev //安装转码规则

babel loader 可以将ES6的代码编译成ES5

创建webpack配置文件

在源代码目录创建 webpack.config.js 文件，内容如下:

var path = require('path');  //加载nodejs的路径处理模块
module.exports = {
    entry: './es6/index.js',
    output: {
        path: __dirname,        //__dirname是一个nodejs变量，表示当前js文件所在的目录
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: path.join(__dirname, 'es6'),    //配置文件目录下的es6文件夹作为js源代码文件夹，所有源代码一定要放在该文件夹下
                loader: 'babel-loader' ,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

entry和output都是通用的配置，与ES6无关，这里不展开。重点在loaders配置，loader和query一定要配置

注意：test配置指定了哪些是ES6代码，可以指定一个文件夹，则所有源代码一定要放在该文件夹下，或者用一个 正则表达式指定哪些是ES6代码。只有ES6代码，才会编译。

之后便可以编写ES6写法的js，打包运行了

参考文档

1. 基于webpack使用ES6新特性
2. 使用webpack进行ES6开发
3. Webpack 中文指南