JavaScriptの依存性管理ツールとして今後流行るかもしれない？webpackというソフトの導入方法を紹介します。

 

[前提]

・OSX

 

0. node.js のインストール

公式サイト(http://nodejs.org/)からダウンロードして、インストーラを起動します。

インストーラに従って次々と進んでいくだけで、簡単にインストール出来ます。

1. webpack のインストール

$ npm install webpack -g

以下のようなメッセージが出ればOKです。

/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js

webpack@1.4.0-beta2 /usr/local/lib/node_modules/webpack

├── memory-fs@0.1.0

├── clone@0.1.18

├── tapable@0.1.7

├── async@0.9.0

├── esprima@1.2.2

├── mkdirp@0.5.0 (minimist@0.0.8)

├── optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)

├── enhanced-resolve@0.7.6 (graceful-fs@2.0.3)

├── webpack-core@0.4.8 (source-map@0.1.38)

├── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34)

└── node-libs-browser@0.4.0 (https-browserify@0.0.0, tty-browserify@0.0.0, constants-browserify@0.0.1, path-browserify@0.0.0, process@0.7.0, os-browserify@0.1.2, string_decoder@0.10.31, domain-browser@1.1.2, punycode@1.3.1, assert@1.1.2, querystring-es3@0.2.1-0, events@1.0.2, timers-browserify@1.1.0, util@0.10.3, console-browserify@1.1.0, stream-browserify@1.0.0, url@0.10.1, vm-browserify@0.0.4, readable-stream@1.1.13, http-browserify@1.5.0, buffer@2.5.0, browserify-zlib@0.1.4, crypto-browserify@3.0.2)

以下のようなメッセージが出た場合は、権限が足りていないので、sudoを使うかsuでroot権限ユーザに変更した上で実行しましょう。

npm ERR! Error: EACCES, mkdir ‘/usr/local/lib/node_modules/webpack’

npm ERR!  { [Error: EACCES, mkdir ‘/usr/local/lib/node_modules/webpack’]

npm ERR!   errno: 3,

npm ERR!   code: ‘EACCES’,

npm ERR!   path: ‘/usr/local/lib/node_modules/webpack’,

npm ERR!   fstream_type: ‘Directory’,

npm ERR!   fstream_path: ‘/usr/local/lib/node_modules/webpack’,

npm ERR!   fstream_class: ‘DirWriter’,

npm ERR!   fstream_stack: 

npm ERR!    [ ‘/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23’,

npm ERR!      ‘/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53’,

npm ERR!      ‘Object.oncomplete (fs.js:107:15)’ ] }

npmERR! 

npm ERR! Please try running this command again as root/Administrator.

 

npm ERR! System Darwin 13.3.0

npm ERR! command “node” “/usr/local/bin/npm” “install” “webpack” “-g”

npm ERR! cwd /Users/XXX/Desktop

npm ERR! node -v v0.10.31

npm ERR! npm -v 1.4.23

npm ERR! path /usr/local/lib/node_modules/webpack

npm ERR! fstream_path /usr/local/lib/node_modules/webpack

npm ERR! fstream_type Directory

npmERR!fstream_class DirWriter

npm ERR! code EACCES

npmERR!errno 3

npm ERR! stack Error: EACCES, mkdir ‘/usr/local/lib/node_modules/webpack’

npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23

npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53

npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)

npmERR! 

npm ERR! Additional logging details can be found in:

npm ERR!     /Users/XXX/Desktop/npm-debug.log

npm ERR! not ok code 0

インストールが完了したら、

$ webpack

と入力して実行してみましょう。

使い方のドキュメントの位置と、指定可能なオプションの一覧が表示されます。

これで導入は完了です。