1. ローダー

Webpackは元々JavaScriptモジュールのみを処理できます。他の種類のファイルを処理するには、ローダーを使用して変換する必要があります。

アプリケーションにCSSファイルを追加する必要がある場合、css-loaderとstyle-loaderを使用します。これらは異なる役割を担っています。css-loaderはCSSファイルを走査し、url()式を見つけて処理します。style-loaderは元のCSSコードをページのstyleタグに挿入します。

以下のコマンドを使用してcss-loaderとstyle-loaderをインストールします（グローバルインストールには-gパラメータが必要です）。

cnpm install css-loader style-loader

上記のコマンドを実行すると、現在のディレクトリにnode_modulesディレクトリが生成され、これはcss-loaderとstyle-loaderのインストールディレクトリです。

次に、style.cssファイルを作成します。コードは以下の通りです：

body {
    background: yellow;
}

main.jsファイルを以下のように変更します：

require("!style-loader!css-loader!./style.css");
document.write(require("./app.js"));

次に、webpackコマンドを使用してバンドルします：

webpack main.js output.js

Hash: a9ef45165f81c89a4363
Version: webpack 1.12.13
Time: 619ms
    Asset     Size  Chunks             Chunk Names
output.js  11.8 kB       0  [emitted]  main
   [0] ./main.js 76 bytes {0} [built]
   [5] ./app.js 46 bytes {0} [built]
    + 4 hidden modules

ブラウザでアクセスすると、以下のような結果が出力されます：

CSSファイルをrequireする際には、loaderの接頭辞「!style-loader!css-loader!」を必ず記述する必要があります。

2. 設定ファイル

コンパイルオプションを設定ファイルにまとめて、一元管理することができます：

webpack.config.jsファイルを作成します。コードは以下の通りです：

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "output.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

次に、webpackコマンドを実行するだけでoutput.jsファイルが生成されます：

webpack

Hash: 4fdefac099a5f36ff74b
Version: webpack 1.12.13
Time: 576ms
    Asset     Size  Chunks             Chunk Names
output.js  11.8 kB       0  [emitted]  main
   [0] ./main.js 65 bytes {0} [built]
   [5] ./app.js 46 bytes {0} [built]
    + 4 hidden modules

webpackコマンドを実行すると、現在のディレクトリのwebpack.config.jsファイルが自動的に読み込まれます。

3. プラグイン

プラグインはwebpackの設定情報のpluginsオプションで指定し、ローダーでは完了できない作業を行います。

webpackにはいくつかの組み込みプラグインがあり、npmで追加のプラグインをインストールできます。

組み込みプラグインを使用するには、以下のコマンドでインストールする必要があります：

cnpm install webpack --save-dev

例えば、ファイルの先頭にいくつかのコメント情報を出力するための組み込みBannerPluginプラグインをインストールできます。

webpack.config.jsを以下のように変更します：

var webpack = require('webpack');

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "output.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('Webpackチュートリアル')
    ]
};

次に実行します：

webpack

output.jsを開くと、ファイルの先頭に指定したコメント情報が表示されます。