LoginSignup
11

More than 5 years have passed since last update.

【初級】Webpack導入

Posted at

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

Webpackの利点

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

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

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

Webpackの導入順番

  1. node.js
  2. npm
  3. 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]

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11