使用方法

http://webpack.github.io/docs/usage.html

このサイトは作成途中のものを公開しています。また、Webpackのバージョンが1.13.0の頃に作成されたものですが、2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。

webpack
webpack1 (旧サイト) 非推奨

インストール

npmを通じてwebpackをインストールすることが可能です。

npm install webpack -g

注意: デモの目的のためにwebpackをグローバル上にインストールしています。実際のアプリケーションを構築する際には、プロジェクトのdevDependencyとしてwebpackをインストールすることをお勧めします。

GETTING STARTED

まずはwebpackのコマンドライン・インターフェース(CLI)を使用して、webpackの基本を学んでみましょう。

JavaScriptを使用するプロジェクトのモジューラーの作成

CommonJS文法を使用して、JavaScript内に幾つかのモジュールを作成してみましょう。

// cats.js
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

// app.js (エントリーポイント)
cats = require('./cats.js');
console.log(cats);

"エントリーポイント"とは、アプリケーションが開始される場所のことであり、またwebpackがモジュール間の依存性の追跡を開始する場所でもあります。

webpack in 5 seconds

webpackにエントリーポイント(app.js)と出力ファイル(app.bundle.js)の情報を伝えます。

webpack ./app.js app.bundle.js

(1)webpackはエントリーポイントとその依存性(依存性の依存性といった推移的なものを含む)の読み込みと解析を行います。 (2)次に、app.bundle.jsへそれら全てをバンドルします。

これでバンドルしたものを実行する準備ができました。 node app.bundle.jsを実行して、猫の名前が表示されることを確認してください。

node app.bundle.js
["dave", "henry", "martha"]

ブラウザでも、このバンドルを使用することが可能です。

GETTING SERIOUS

webpackは非常に柔軟なモジュール・バンドラーで、多くの高度な機能を提供しますが、全ての機能がコマンドライン・インターフェースを通じて使用できるわけではありません。 webpackの柔軟性をフルに活用するためには、"設定ファイル"を作成する必要があります。

プロジェクト構造

実際のwebpackのプロジェクトでは、ソース・ファイルとバンドルされるファイルはフォルダ構造で別の場所に配置されるでしょう。例えばこの例では、src内にソースファイルを配置して、binにバンドルされたファイルを配置します。

最終的なプロジェクト構造は次のようになります。

実際には、様々なプロジェクトの構造が存在するでしょう。あるプロジェクトではsrcの代わりにappを使用するかもしれませんし、あるプロジェクトではbinの代わりにdistを使用するかもしれません。

テストを行うプロジェクトであれば、test、tests、spec、sppecsなどのフォルダが考えられます。またはソース・フォルダ内にテスト・ファイルを共有するかもしれません。

binとsrcディレクトリを作成します。
```
mkdir bin
mkdir src
```
ソース・ファイルをsrcフォルダに移動します。
```
mv app.js cats.js src
```
npmプロジェクトの初期化を行います。
```
npm init
# (npmによる質問に答えます)
```
開発時に依存関係があるとして(development dependency)として、webpackをインストールします。これは、あなたのプロジェクトにおいての互換性のあるwebpackのバージョンの宣言になります。
```
 npm install --save-dev webpack
```

設定ファイルに設定を定義

プロジェクトが進むにつれ、設定はより複雑になり、コマンドラインからwebpackを設定することが困難になるでしょう。この問題を解決するために、設定ファイルを作成し、そちらで設定を定義するようにしましょう。

webpack.config.jsを作成します。
```
 module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js'
     }
 };
```
webpackの設定ファイルはNode形式のモジュールです。そのため、設定オブジェクトをこのモジュール外にexportさえすれば、ここに様々なコードを書いて実行することが可能です。
設定ファイルを配置したら、次のようにしてwebpackを実行することが出来ます。
```
webpack
```
webpackは設定ファイルを読み込み、バンドルファイルをビルドして、それをbin/app.bundle.jsとして保存します。 webpackが出力したファイルを調べると、両方ファイルのソースコードが含まれていることが確認できるはずです。
bin/app.bundle.jsを実行して、再び猫の名前の一覧が表示されることを確認してください。
```
node bin/app.bundle.js
["dave", "henry", "martha"]
```

ローダーの使用

webpackは最初からJavaScriptモジュールのみをサポートしますが、多くの人はES2015、CoffeeScript、TypeScript等のトランスパイラを使用することになるでしょう。これらはローダー(loader)によって、使用することが可能になります。

ローダーはwebpackが、他のモジュール(別の言語で書かれた)を(webpackが理解できる)JavaScriptにして読み込む("load")のに使用する特別なモジュールです。例えば、babel-loaderは、ES2015ファイルを読み込むためにBabelを使用します。

json-loaderはJSONファイルを読み込みます。 (単純にmodule.exports =を前に追加することで、CommonJsモジュールに変えています。)

ローダーはチェーン可能であり、場合によってはローダーをチェーンすることが必要になることがあるでしょう。例えば、yaml-loaderはYAMLをJSONに変換するだけなので、それを使用するにはjson-loaderにチェーンする必要があります。

babel-loaderを使用したES2015のトランスパイル

この例では、webpackにソースファイルをBabelを通して実行することを伝えることで、ES2015の機能の使用が可能になります。

Babelとそのプリセットをインストールします。
```
npm install --save-dev babel-core babel-preset-es2015
```
babel-loaderをインストールします。
```
npm install --save-dev babel-loader
```
.babelrcを追加することで、これらのプリセットを使用するようにBabelを設定します。
```
{ "presets": [ "es2015" ] }
```
webpack.config.jsを修正して、全ての.jsファイルがbabel-loaderを使用して処理されるようにします。
```
module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    }
}
```
ここではnode_modulesを除外(exclude)しています。そうしなければ、全ての外部ライブラリもBabelを通した処理が行われてしまい、コンパイル速度が著しく低下してしまいます。
使用したいライブラリをインストールします。(この例ではjQuery)
```
npm install --save jquery babel-polyfill
```
この時、ここで指定するライブラリは実行時(runtime)に使用されるものとするため、 --save-devの代わりに--saveを使用しています。また、babel-polyfillを使用することで、古いブラウザであってもES2015のAPIを使用できるようにしています。

src/app.jsを編集します。

import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';

$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
    $('<li></li>').text(cat).appendTo(ul);
}

webpackを使用してモジュールをバンドルします。
```
webpack
```
このアプリケーションを実行するためのindex.htmlを追加します。
```
<!DOCTYPE html><body>
<script src="bin/app.bundle.js"></script>
```

index.htmlを開くと、猫の名前の一覧を確認できるはずです！

アプリケーションのバンドル内でファイルを含めるために使用される数多くの様々なローダーが存在し、これにはcssやimageのローダーも含まれます。

プラグインの使用

通常、あなたはワークフローの中でバンドルに何かしらの追加の処理を行いたいと考えることがあるでしょう。例えば、クライアントにより速くファイルを読みこませるために、minify(圧縮)することが考えられます。これはプラグインによって行うことが可能です。設定に、uglifyプラグインを追加してみましょう。

const webpack = require('webpack');

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

このUglifyプラグインはwebpackを使用して取り込まれるため、新たにモジュールを追加する必要はありませんが、常にこのケースのようになるとは限りません。また、自分自身でカスタム・プラグインを書くことも可能です。このビルドを行うと、uglifyプラグインによってバンドルのサイズが1618バイトから308バイトにカットされます。