みなさん、こんにちは。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
