,

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

公開日: 2017/06/02
更新日: 2018/10/04

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

Contents

Installation

JavaScript compiler の Babel と、これを webpack で扱うための babel-loader をインストールします。

% yarn add --dev babel-core babel-loader

.babelrc

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

% yarn add --dev babel-preset-env
.babelrc
{
  "presets": ["env"]
}

webpack.config.js

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

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

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

% yarn add babel-polyfill
app/vendors.js
import 'babel-polyfill';

補遺

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