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

More than 1 year has passed since last update.

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'
}),
],
};