webpack2でpostcssとextract-text-webpack-pluginのビルド周りの変更点

WEB+DB Press Vol.97の特集1、第一章を写経している。
既に発刊時にはwebpackのバージョンが未指定だと2になっていた。
しかし、雑誌掲載のコードは注記にもあるがwebpack1の内容で書かれている。
それによってpostcssのビルドでかなりハマったので、同じ沼にハマった人が抜け出せるように書き残す。

一番の変更点

下記部分をwebpack.config.jsに書いちゃいけなくなっている。

webpack.config.js

...
postcss: [
  require('postcss-easy-import')({glob: true}),
]
...

この部分のコードを消し去り、代わりにpostcss.config.jsを作成して書くのが良さそう。
下記コンフィグを設置したところ一番の沼は回避できた。

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-easy-import')({glob: true})
    ]
}

entryが掲載のコードのままだとbuildは成功するけどエラー吐かれる問題

entryの記述を下記にして対応できた。

webpack.config.js

entry: ['./src/main.js', './src/main.css']

最終的な成果物webpack.config.js

その他、outputのpathがフルパスにしないと怒られたり、module.loaders => module.rulesになったり、直したところ最終的には下記で動きました。

webpack.config.js

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

module.exports = {
    entry: ['./src/main.js', './src/main.css'],
    output: { path: __dirname + '/public', filename: 'bundle.js' },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    loader: 'css-loader!postcss-loader',
                }),
            }
        ],
    },
    devtool: 'source-map',
    devServer: {
        contentBase: 'public',
        port: 8080,
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css'
        }),
    ],
};