现在我们已经学习了基础的 webpack 使用方式，为了编写 ES6，我们要学会利用 babel，因为 ES6 是 JavaScript 新的规范。

如果你曾经使用过 ES6，应该就不想再回去写 ES5 了。如果你还没有用过 ES6，很大的原因可能是因为不了解开发环境该使用哪些配置选项，因为那些设定很折磨人。

我希望这个教程可以让这些过程可以变得更容易。

Babel

如果你想要有更深入的说明，和更细微的设定 babel手册。我在这里说明的是一些基本的设定。

Babel 是做什么用的？

简单来说，babel 让你可以更完整的使用 JavaScript 的 ES6 feature，因为目前大部分的浏览器和环境都不支持，所以将它转换成 ES5，让它可以更广泛的被支持。

这个 ES6 的代码，目前只有最新的浏览器才支持。

const square = n => n * n;

它会被转换成：

var square = function square(n) {  return n * n;
};

可以执行在任何支持javascript的地方

配置babel

另一个工具、另一个配置文件。这个时候我们有个文件叫做：

.babelrc

.babelrc 文件只有一行代码。

{  "presets": ["es2015", "stage-2"]
}

你只需要指定一个 presets 选项，下面是描述的摘录：

JavaScript 也有一些可能成为标准的提案，正在 TC39（ECMAScript 标准背后的委员会）的程序中。

这个程序被分为 5 个 statge（0-4）。如果提案获得更多的同意，通过各个 stage，就很容易被接受纳入标准中，最后在 stage 4 中被接受纳入标准。

注意，这里没有 stage-4 的 preset，它只是作为的 es2015 的 preset。 以上。

总结以上，presets 就是一些打包了 plugins 的 bundles，它们将一些功能加入到你的项目文件。es2015 中的功能，肯定会出现在 ES6 的官方版本，而 stages 0-3 的 presets ，则是未来 JavaScript 规范的一些提案，现在还在草案阶段。如果选择的 stage 越低，你使用的 features 之后将不支持的风险越高。

从我的经验来说，我至少需要 stage-2，让我可以使用一个叫作 object spread 的东西。你可以在这里看看其他的提案，然后决定你要使用哪个 stage。

总之，如果要使用到这些 presets，我们需要安装它们：

npm install --save-dev babel-preset-es2015 babel-preset-stage-2

你全部需要做的事情只有这些

Webpack

我们可以使用与 part 1-范例七相同的设置文件，但是需要加入 ES6 所需要的功能。

目前配置文件：

// webpack.config.dev.js
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [  
    'webpack-dev-server/client?http://localhost:8080',  
    'webpack/hot/dev-server',  
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [  
    new webpack.HotModuleReplacementPlugin(),  
      new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
}

和

// webpack.config.prod.js
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  devtool: 'source-map',
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [  
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),  
      new webpack.optimize.OccurrenceOrderPlugin(),  
        new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

一个新的loader

如果要将我们的代码转换成 ES5，我们需要通过执行一个新的 loader 叫作 babel-loader，它和 babel-core 有依赖关系。这个 loader 使用了我们的 .babelrc 配置项来了解和转换我们的代码。

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

我们在 dev 和 prod 这两个配置项中加入：

// 為了節省篇幅我只顯示「loaders」的部分。// webpack.config.dev.js 和 webpack.config.prod.js
module: {
  loaders: [{
    test: /\.css$/,
    loaders: ['style', 'css']
  }, {
    test: /\.js$/,
    loaders: ['babel'],
    include: path.join(__dirname, 'src')
  }]
}

一件非常重要的事情，请注意 include 属性的用法。当我们执行 webpack 时，因为我们在 test 有设定 /.js$/，webpack 会在你的 dependency tree 每一个 js 文件中尝试执行 babel loader。

你可以看出这有什么问题吗？要是我 require('bluebird')，或是任何其他大型的 npm package 会怎样？它会借由 babel-loader 尝试执行整个 node_modules，这样大量的执行会延长你的 build 过程。

include 可以防止这个这个问题，loader 只会套用在你所指定 src 目录下的 .js 档案。

另一个方式是，你可以将 include: path.join(__dirname, 'src') 改变成 exclude: /node_modules/，这意思是除了node_modules 目录外其他都包括。更多资讯可以在这里找到。

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » Webpack初学者-使用webpack与babel（一）