WebpackってCSS周りのLoaderがいっぱいあって分かりにくいので整理してみる ref: http://qiita.com/shuntksh/items/bb5cbea40a343e2e791a

file0.js

{
    test: /\.css$/,
    loader: "style-loader!css-loader?modules&importLoaders=1&camelCase!postcss-loader",
},

file1.txt

# ローダの処理を無理やりシェル風に書いてみた
$ cat file.css | postcss-loader | css-loader --modules --importLoaders=1 | style-loader > bundle.js

file2.txt

/* main.css */
.myInput { margin: 10px; }

file3.txt

// Bundle前のJS
import CSS from "./main.css"

file4.txt

// 生成されたBundled JSの抜粋
var styles = listToStyles(list);
addStylesToDom(styles, options);

return function update(newList) {
  var mayRemove = [];
  for(var i = 0; i < styles.length; i++) {
    var item = styles[i];
    var domStyle = stylesInDom[item.id];
    domStyle.refs--;
    mayRemove.push(domStyle);
  }
  if(newList) {
    var newStyles = listToStyles(newList);
    addStylesToDom(newStyles, options);
  }
  for(var i = 0; i < mayRemove.length; i++) {
    var domStyle = mayRemove[i];
    if(domStyle.refs === 0) {
      for(var j = 0; j < domStyle.parts.length; j++)
        domStyle.parts[j]();
      delete stylesInDom[domStyle.id];
    }
  }
}

file5.txt

// 生成されたBundled JSファイル。デフォルトではGlobal Scopeとの衝突を避けるため、
// それぞれのクラス名がランダムな名前に変更されている。
exports.locals = {
  "myInput": "_1LSFDF7AGSjr4tqAAn21qj",
  "myInput": "_1LSFDF7AGSjr4tqAAn21qj"
};

file6.js

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
}

file6.txt

npm i -D extract-text-webpack-plugin

file7.txt

npm i -D extract-text-webpack-plugin

file8.js

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},

file8.txt

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var config = {
    entry: { main: "./src/main.js" },
    output: {
        path: "./build/",
        filename: "[name].[chunkhash].js",
        sourceMapFilename: "[name].[chunkhash].map",
    },
    plugins: [
        // 1) Extract Pluginを読み込む
        new ExtractTextPlugin("[name].[chunkhash].css"),

        // 2) あわせてHtmlWebpackPluginを使うとHTML上にCSSへのリンクを書き出してくれる
        // Add => <link href="<name.chunkhash>.css" rel="stylesheet"></head>
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",
            inject: "body",
        }),
    ]
    module: {
        loaders: [
            // Extract css files
            {
                // ３）実際にExtractTextPluginでCSSを処理する
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("css-loader")
            },
        ]
    },
}
module.exports = config;

file9.js

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},