postcssで書いたものをwebpackで1つのまとめる

こういうやつ、いつもハマって時間使うので書いておきます。

postcssが〜とかではなく、extract-text-webpack-pluginがどんなやつなのか分かってなかったのが問題でした。これを使うと各loaderでコネコネした結果を指定したファイルに吐き出してくれます。これを使わずテキトーにやると、HTMLに謎の<style>が生成されて、えっ、productionでもこういう感じなの...と不安になります。

// webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");

var extractCSS = new ExtractTextPlugin("css/app.css");

module.exports = {
  entry: [
    "./web/static/js/app.js",
    "./web/static/css/app.css",
  ],
  output: {
    path: "./priv/static",
    filename: "js/app.js",
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"],
        },
      },
      {
        test: /\.css$/,
        loader: extractCSS.extract(  # この辺がよくわからんかった
          'style-loader',
          'css-loader',
          'postcss-loader',
        )
      },
    ],
  },
  postcss: [],
  plugins: [
    extractCSS,
    new CopyWebpackPlugin([{from: "./web/static/assets"}]),
  ],
};