2017.06.04

Webpack + Babel 最小構成での環境構築(2017年度6月版)

node.jsの環境が整っていれば5分で環境構築は終わるのでササッとやっちまいましょう。もしnode環境がない場合は、WindowsならNodist、Macならばnodebrewあたりでも突っ込んでさっくりと用意しちまおう!こんちくしょー!

環境

  • Mac OS X El Capitan
  • node v7.7.2
  • npm 4.1.2
  • webpack 2.6.1

準備

まずは適当なディレクトリを作って、npm が使えるようにするよ

インストール

以下のモノをインストールするよ

  • babel-loader
  • babel-core
  • webpack
  • babel-preset-env

コマンドはこんな感じで

すると package.json はこんな感じに

scripts のところをちょこっと弄ってるよ。npm run build で webpack が走るようにしているよ

Webpackの設定

webpackの設定は webpack.confing.js というファイルを先程作成したディレクトリの直下に置き、以下の様に設定したよ

つぎに .babelrc とうファイルを webpack.config.js 同様の場所に作成し以下の様に設定

ディレクトリ構成

以下の通り。(node_modules配下は省略してるよ

書いてコンパイルしてみる

src/entry.js にES2015っぽいのを軽く書いてみる

保存したらターミナルで、先ほど作成したディレクトリ直下でコンパイル

すると dist に bundle.js が作成される。内容は以下の通り

無事コンパイルできましたとさ。めでたしめでたし。