[webpack] webpack 2 入門: babel による JavaScript のトランスパイル

ES2015 で書いた JavaScript を ES5 に変換します。

[markdown]
## Installation

JavaScript compiler の [Babel](https://babeljs.io/) と、これを webpack で扱うための babel-loader をインストールします。

> * [babel/babel-loader: Webpack plugin for Babel](https://github.com/babel/babel-loader)
> * [Using Babel · Babel](https://babeljs.io/docs/setup/#installation)

“`prettyprinted
% yarn add –dev babel-core babel-loader
“`

## .babelrc

Babel の設定は `.babelrc` ファイルに書くことにします。

> * [sandbox-es6/.babelrc at master · DriftwoodJP/sandbox-es6](https://github.com/DriftwoodJP/sandbox-es6/blob/master/.babelrc)

“`prettyprinted
% yarn add –dev babel-preset-env
“`

> * [Env preset · Babel](https://babeljs.io/docs/plugins/preset-env/)

“`json:.babelrc
{
“presets”: [“env”]
}
“`

## webpack.config.js

`webpack.config.js` に module rules を追加します。

“`javascript:webpack.config.js
var path = require(‘path’);
module.exports = {
entry: {
app: [‘./app/index.js’, ‘./app/console.js’],
vendors: ‘./app/vendors.js’
},
output: {
filename: ‘[name].js’,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’
}
}
]
}
};
“`

## babel-polyfill

必要に応じてブラウザポリフィルをインストールします。

> * [Polyfill · Babel](https://babeljs.io/docs/usage/polyfill/)

“`prettyprinted
% yarn add babel-polyfill
“`

“`javascript:app/vendors.js
import ‘babel-polyfill’;
“`

> * [Add: babel-loader · DriftwoodJP/sandbox-webpack@a851c15](https://github.com/DriftwoodJP/sandbox-webpack/commit/a851c155c22e4f016c26bec2de5a1ecfc3f78d75)

## 補遺

シンプルなチュートリアル。

> * [webpack+babel環境でフロントエンドもES6開発 – Qiita](http://qiita.com/HayneRyo/items/74892d3a37ee96a5df60)
> * [ES2015(ES6)+webpack+babel-loaderで開発環境を構築 – Qiita](http://qiita.com/d-dai/items/23410fa7d84fb1020ea8)
> * [webpack + Babel 入門 – ぺーぺーSEのブログ](http://blog.pepese.com/entry/2017/01/15/140643)
[/markdown]