webpack3 でフロントエンド開発(入門編)

webpack とは、JavaScript、CSS、画像などのフロントエンドに関わるファイルを管理するツールです。webpack が普及する前は、こういったファイルのビルド・圧縮作業などはサーバサイドのフレームワークに組み込むか、各種ツールを探してやっていましたが、それが webpack だけでできるようになったので、今やフロントエンドの開発をやる人にとっては必須のツールと言えるかもしれません。

webpack には使いこなせないくらいの豊富な機能が揃っていますが、便利なのはやはりビルド(=ソース変換)です。JavaScript なら React や CoffeeScript、CSS なら Scss や Sass というように、フロントエンドにはさまざまな便利な文法が存在しています。これらのファイルは、以前までは各言語専用のツールを使ってネイティブの文法に変換していましたが、webpack だけですべてビルドできるようになり、開発者は気軽に自分の好きな文法を選択できるようになりました。

この他にも、webpack には require を使用することで、必要なファイルを必要な時だけ読み込める「モジュール機能」があります。ただし、これは JavaScript の ES2015 の登場によって同じような機能が提供されたため、こちらをメインで使うことは今後減っていくことでしょう。

今回は入門編として、webpack のインストールから、ES2015 をネイティブの文法に変換して動かすところまでをやってみようと思います。

ちなみに ES2015(またはES6) は、2015年にリリースされた JavaScript の新しい仕様で、これまでにない便利な機能や新しい文法が追加されましたが、現状ブラウザの対応が追いついていない箇所もあり、すべての機能を試すにはブラウザのコンソールだけではできません。

そこで、ES2015 の文法をネイティブの JavaScript に変換するツール Babel を webpack で使ってみようと思います。

Node.js のインストール

まず、webpack のインストールにパッケージ管理ツール npm を利用するため、Node.js をインストールします。Node.js をインストールするには、公式サイトから推奨のバージョンをインストールするか、Mac の場合は Node のバージョン管理ツール nvm でインストールすることができます。

# nvm でインストールする場合
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
$ source ~/.bash_profile # 設定を読み込む
$ nvm install v7.10 # 特定バージョンのNode.jsをインストール
$ node -v # バージョンを確認

これで npm コマンドが使えるようになりました。

npm でプロジェクトを作成する

npm には、プロジェクトを作成するためのコマンドも用意されています。まずは適当にフォルダを作成してプロジェクトを作成してみましょう。

$ mkdir sample_app
$ cd sample_app
$ npm init # プロジェクト作成

プロジェクト名などいろいろ聞かれますが、後で変更できるので最初はすべて[Enter]でも大丈夫です。すると、プロジェクトの設定ファイルとなるpackage.jsonが作成されます。package.json には、コンソールで質問されたプロジェクト名やバージョンの他、任意のコマンドを設定できる scripts や、author、 license など独自のモジュールを作成して公開するときに利用するキーが含まれています。(モジュールを公開しない場合は不要なので削除しておきましょう)

※ モジュールとは、webpackにおける外部ライブラリのことです。

npm の使用方法

それでは次に、プロジェクトで使用するモジュールをインストールします。まずは npm の使い方から紹介します。

$ npm install # package.json に記載されているモジュールをインストール
$ npm install xxx # 特定のモジュールをインストール
$ npm install xxx@x.x.x # バージョンを指定して特定のモジュールをインストール
$ npm install -g xxx # グローバルにインストール
$ npm install --save xxx # package.json にバージョンを記録する かつ プロジェクトから直接呼ばれるモジュール
$ npm install --save-dev xxx # package.json にバージョンを記録する かつ プロジェクトからは直接呼ばれないモジュール(テストツールなど)

$ npm uninstall xxx # アンインストール

モジュールをインストールすると node_modulesフォルダが作成され、指定したモジュールと依存するモジュールが入ります。フォルダが作成される場所は、グローバルにインストールした場合は$ npm root -gで出力されるパスに、それ以外は npm コマンドを実行したパスの直下になります。

グローバルにインストールしたモジュールを使用する時に not found となる場合は、パスが通っていない可能性があるので、以下のように通しておきましょう。

# Mac の場合
$ echo export NODE_PATH=$(npm root -g) >> ~/.bash_profile
$ source ~/.bash_profile

–save をつけてインストールした場合は、package.json の dependenciesキー
に、–save-dev をつけてインストールした場合は、devDependenciesキーにモジュール名とインストールされたバージョンが記録されます。

JavaScript を実行してみる

プロジェクトの直下に、動作確認で使用するindex.jsを作成しておきます。試しに以下のコードを記述し、メッセージが出力されるか確認してみます。

console.log("Hello")

JavaScriptファイルを実行するには、node コマンドを使用します。

$ node index.js

コンソール上で “Hello” と表示されるはずです。

ES2015のソースを実行する

それでは、本題の ES2015 の文法で書かれたソースを実際に変換・実行してみましょう。
ES2015 の変換に必要な Babel のモジュールと webpack をインストールします。

$ npm install --save-dev babel-core babel-preset-es2015 babel-loader webpack

最初に、webpack.config.jsというファイルをプロジェクト直下に作成して、webpack の設定を行います。

module.exports = {
  entry: './index.js', // ビルド時に読み込むファイル
  output: {
    path: __dirname, // 出力ファイルのディレクトリ名
    filename: 'bundle.js' // 出力ファイル名
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}

__dirnameはプロジェクトのパスを指します。index.jsからビルド(=ソース変換作業)を開始し、変換後のソースを bundle.js という1つのファイルに書き出します。module の loaders が変換ルールを設定しているところで、上記の設定は「node_modules フォルダ以外の、拡張子が.jsになっているファイルを、babel-loader を使って変換する」という意味です。

変換するには、プロジェクトから webpack コマンドを叩きます。package.json の scripts に webpack を実行するコマンドを作成しておきます。現在の段階だと package.json は以下のようになります。

{
  "name": "sample_app",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.4"
  }
}

scripts に設定したコマンドは、$ npm run xxxで実行できます。ここでは build を作成したので、$ npm run buildになります。変換後、node コマンドで変換後のファイルを実行して、”Hello” が表示されるか確認してみましょう。

$ npm run build
$ node build.js
# Hello

これで、ES2015 の文法を実行できるようになりました。せっかくなので、jsファイルをもう1つ作成して、index.js でモジュールとして読み込んでみます。さらに HTML を作成して、ページを開いた時に bundle.js を読み込むようにしてみます。各ファイルは以下のようになります。

calc.js

export const add = (a, b)=> {
  return a + b
}

export const substract = (a, b)=> {
  return a - b
}

index.js

import { add, substract } from './calc.js'

document.write(`1 + 2 = ${add(1, 2)}`)
document.write('<br>')
document.write(`10 - 2 = ${substract(10, 2)}`)

index.html

再度 $ npm run build を実行して、index.html をブラウザで開いてみましょう。以下のように表示されたら成功です。

1 + 2 = 3
10 – 2 = 8

以上で ES2015 を webpack で動かす説明は終わりです。あとは ES2015 を学習し、いろいろなページを作成してみましょう。

おまけ: webpackの自動リロード

webpack コマンドのオプションの1つに –watch があり、これを利用するとファイルを変更した時に自動で webpack コマンドが実行され、都度 $ npm run build をする必要がなくなります。

"scripts": {
  "build": "webpack --watch"
}

さらに、webpack-dev-serverを利用すると、自動ビルドの他にHTMLの自動リロードもやってくれるので、わざわざページを手動で更新する必要がなくなります。

$ npm install --save-dev webpack-dev-server

webpack-dev-server 起動用のコマンドを用意します。

"scripts": {
  "build": "webpack --watch",
  "dev": "webpack-dev-server"
}

$ npm run devで起動後、http://localhost:8080にアクセスすると、ページを自動で読み込むようになります。

※ webpack についてもっと知りたい場合は、webpack3 でフロントエンド開発(実践編) をご覧ください。