最近は Browserify より webpack が人気なんて話もあるみたいなので CSS Modules を webpack で試してみました。

インストールと設定

npm コマンドで。CSS のために css-loader と style-loader というモジュールもインストールします。

$ npm install -g webpack
$ npm install -D css-loader style-loader

設定は webpack.config.js に書きます。

// webpack.config.js

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module: {
        loaders: [
            {
                loader: ExtractTextPlugin.extract('style', 'css?modules&impoerLoaders=1'),
                test: /\.css$/
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};

変換

変換する JavaScript と CSS を用意します。

// a.js

const x = require('./x.css');
const y = require('./y.css');

console.log(x);
console.log(y);

/* a.css */

.nice-style {
    transition: all 1s linear;
}

/* b.css */

.good-class {
    color: red;
}

webpack コマンドにソースと変換後のファイル名を指定すると変換できます。

$ webpack a.js bundle.js

これで bundle.js と styles.css が生成されます。

bundle.js をみると require('...') が {"nice-style":"ax-tGlA1ZJoEWHoO0Svxx"} のような JSON になっています。

styles.css はクラス名が ax-tGlA1ZJoEWHoO0Svxx のように変換された後まとめられたスタイルシートです。

細かい設定

PostCSS を使ったり、その他設定は loader に指定すればできるみたいです。

$ npm install -D postcss-loader autoprefixer

// webpack.config.js

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module: {
        loaders: [
            {
                loader: ExtractTextPlugin.extract('style', [
                    'css?modules&camelCase&impoerLoaders=1',
                    'postcss'
                ]),
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css')
    ],
    postcss: [
        require('autoprefixer')()
    ]
};

さっきと比べて camelCase と postcss の記述が増えています。

camelCase を指定すると {"nice-style":"ax-tGlA1ZJoEWHoO0Svxx","niceStyle":"ax-tGlA1ZJoEWHoO0Svxx"} のように JavaScript で受け取れる JSON にキャメルケースのプロパティが増えます。

postcss では autoprefixer を使ってベンダープレフィックスをつけています。生成された styles.css を見ると -webkit-transition の指定が増えているのがわかります。

まとめ

こんな感じで webpack を試してみました。設定ファイルが JavaScript なのでいろいろできますし、もとから複数の変換を噛ませることも考えられているみたいです。 Browserify よりも細かく制御できるのがメリットで、設定が複雑になりやすいのがデメリットといった感じでしょうか。

本体とプラグインをインストールしたらすぐに使えるという感じではないですが、個々のプロジェクトごとに細かくビルドのフローを作るのには向いている印象です。