【JavaScript】webpackのインストールと始め方

スポンサーリンク

モジュールバンドラの 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 initpackage.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.jsonlodashが追加されました。

  "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