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]
詳しい使い方は、後日書きます。