みなさん、こんにちは。KEYチームの矢納です。
過去記事の目次はこちらに移動しました。

今回はwebpackを使った記事を書いていこうと思います。Angularは1系です。

webpackとは何か？

さて、いきなりwebpackと言われても何もわかりません。

webpack takes modules with dependencies and generates static assets representing those modules.

公式ドキュメントによると上記のことだそうです。依存解決ツールでもあり、複数のファイルをまとめてくれるものです。

実践

とりあえず、手を動かしていきましょう。

１．初期準備

$ mkdir ~/sample
$ cd ~/sample
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (sample) [何も入力せずにEnter]
version: (1.0.0) [何も入力せずにEnter]
description: [何も入力せずにEnter]
entry point: (index.js) [何も入力せずにEnter]
test command: [何も入力せずにEnter]
git repository: [何も入力せずにEnter]
keywords: [何も入力せずにEnter]
author: [何も入力せずにEnter]
license: (ISC) [何も入力せずにEnter]
About to write to /Users/yanu/sample/package.json:

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) [何も入力せずにEnter]

npm init 後の質問は基本的には何も入力せずにEnterで大丈夫だと思います。

２．webpackやAngular等のインストール

$ npm install webpack webpack-dev-server stubby --global
$ npm install angular angular-route bootstrap --save-dev

stubbyはMockServerです。

３．loaderのインストール

webpackは様々なlodaerを使って依存を解決します。

$ npm install css-loader file-loader html-loader style-loader url-loader --save-dev

loaderはたくさん用意されていますので、ドキュメントを参照して下さい。

４．アプリ作成

Githubに用意しましたので、こちらを利用して下さい。

５．webpack.config.js

このファイルにentryやoutput先、loaderの設定等を書きます。

６．package.json

このファイルのscriptsオブジェクトに色々と追加します。

  "scripts": {
    "dev": "webpack-dev-server --colors --inline",
    "stub": "stubby -d server/server.yaml",
    "serve:windows": "start npm run stub && npm run dev",
    "serve:mac": "npm run stub & npm run dev",
    "build": "rm -f app/bundle.js && webpack --colors",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

７．実行

$ npm run serve:mac

ブラウザで http://localhost:8000/app/ にアクセスすれば、画面が表示されると思います。Bootstrapや独自で作成したcssファイルは app.js で読み込んでいます。

８．ビルド

$ npm run build

実行後、 app 配下に bundle.js が作成されています。このファイルにhtml, javascript、css、imageはBASE64に変換されて書き込まれています。html, css に関しては webpack.config.js で minimizeを設定してありますので、圧縮されます。
作成された bundle.js と index.html をサーバに配置すれば完了です。

おわりに

webpackを使って複数あるファイルを一つにすることができました。grunt や gulp 等を代わりになるのではないでしょうか。

今回、javascript の minify ができませんでした。webpack は UglifyJsPluginというのを用意しているのですが、変数名を変えてしまうので、anguler が依存解決に失敗してしまいます。だれかご存知でしたら、ご教示ください。

Email: yanou at atware.co.jp

webpack + Angular