【初級】Webpack導入 #Node.js

Webpackの目的とWebpackの導入方法を記述する。※ 2015年4月時点

Webpackの利点

利点 : 依存関係をJavascriptの任意のファイル数で管理することが出来る。Webpackの利点は1ファイルの管理ではなく、任意の数のファイルを生成出来る。

Web開発を行っていると、様々なファイルをインクルードすることが多い。例えば、HTMLファイルのHeadタグの中でJavascriptのファイルを複数読み込む。

その依存関係を解決する為に、当パッケージを利用し、ファイル数を削減する。

Webpackの導入順番

node.js
npm
webpack

コマンド

node.js
homebrewを用いてインストールする
(Linuxはyumとかでよろしく)

%brew install node
%node -v
v0.10.36

npm
homebrewを用いてインストールする
(Linuxはyumとかでよろしく)

%brew install npm
%npm -v
2.3.0

bower
npmを用いてインストールする
グローバル環境にインストール

%npm install -g bower
May bower anonymously report usage statistics to improve the tool over time? (Y/n) Y or N ←どっちでも可
%bower -v
1.4.1

webpack
npmを用いてインストールする
グローバル環境にインストール
yo -vやると色々聞かれる

%npm install -g webpack

簡単な使用方法

簡単な使用方法(Weppackのほぼコピペ)
http://webpack.github.io/docs/tutorials/getting-started/

entry.js

document.write("It works.");

index.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

% webpack ./entry.js bundle.js
Version: webpack 1.7.2
Time: 154ms
    Asset  Size  Chunks             Chunk Names
bundle.js  1437       0  [emitted]  main
chunk    {0} bundle.js (main) 28 [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 {0} [built]

詳しい使い方は、後日書きます。