モジュールバンドラの webpack 入門です。
事前準備
webpack 公式の Getting Started を元にしています。Qiita などにある比較的新しい記事でも動かなかったりするのでバージョンが違う場合は公式を確認しましょう。今回の実行環境は以下の通りです。
$ node -v v6.10.3 $ npm -v 5.3.0 $ webpack -v 3.3.0
Node.js と npm が必要なのでインストールが必要な場合は以下を参照して下さい。
Node.jsのバージョン管理ツールであるnvmのインストールと使い方 - TASK NOTES
Node.jsのパッケージ管理ツールのnpmについて - TASK NOTES
webpackのインストール
プロジェクトディレクトリを作成してnpm init
でpackage.json
を生成します。
$ mkdir webpack-test && cd webpack-test $ npm init -y Wrote to /Users/tasukujp/Documents/dev/webpack-test/package.json: { "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
続いてwebpack
をインストールしてください。
$ npm install webpack --save-dev
node_modules/.bin
配下にwebpack
の実行ファイルが作成されています。
$ ./node_modules/.bin/webpack -v 3.3.0
package.json
にもwebpack
が追加されました。
"devDependencies": { "webpack": "^3.3.0" }
webpackでビルドする
JavaScript ユーティリティライブラリのlodash
をインストールします。
$ npm install --save lodash
package.json
にlodash
が追加されました。
"dependencies": { "lodash": "^4.17.4" }
表示確認用の HTML ./index.html
とエントリーポイントの JavaScript ./src/index.js
を作成します。
<html> <head> <title>Getting Started</title> </head> <body> <script src="./dist/bundle.js"></script> </body> </html>
エントリーポイントのファイルではimport
で先程インストールしたlodash
をバインドしてます。
import lodash from 'lodash'; function component() { var element = document.createElement('div'); element.innerHTML = lodash.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
webpack の設定ファイル./webpack.config.js
を作成します。エントリーポイントのファイルとビルド結果を出力するファイルを指定しています。
var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
webpack
コマンドを実行するとlodash
モジュールがバンドルされたファイルが出力されます。
$ ./node_modules/.bin/webpack Hash: 16b22cc00b9e0696153a Version: webpack 3.3.0 Time: 489ms Asset Size Chunks Chunk Names bundle.js 544 kB 0 [emitted] [big] main [0] ./src/index.js 225 bytes {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 1 hidden module $ vi dist/bundle.js
静的サーバーを起動してlocalhost:8000
にアクセスしてみましょう。Hello webpack と表示されたら成功です。 ./dist/bundle.js
のみでlodash
も読み込めていることがわかります。
$ python -m SimpleHTTPServer Serving HTTP on 0.0.0.0 port 8000 ...
NPMスクリプトを使用する
webpack
コマンドでビルドする場合、webpack の bin ファイルを直接指定して実行するか PATH を通す必要があります。PATH を通すにはdirenv
などが便利ですが、npm-scripts を使用することで簡単に実行コマンドを指定できます。package.json
に以下を追加しましょう。npmローカルにインストールされたパッケージを名前で参照できます。
"scripts": { "build": "webpack" },
この設定によりbuild
というコマンドでwebpack
が実行されるようになりました。
$ npm run build > webpack-test@1.0.0 build /Users/tasukujp/Documents/dev/javascript/webpack-test > webpack Hash: 16b22cc00b9e0696153a Version: webpack 3.3.0 Time: 459ms Asset Size Chunks Chunk Names bundle.js 544 kB 0 [emitted] [big] main [0] ./src/index.js 225 bytes {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 1 hidden module