css-hot-loaderでcssファイルのhot module replacement
extract-text-webpack-pluginでcssを別のファイルに出力するようにしていると、hot module replacementが使えない。
process.env.node_env !== 'production'
でdevelopmentとproductionでextract-text-webpack-pluginを使い分けて、開発環境ではhot module replacement を有効にすることもできるだろうけど、css-hot-loaderを使えばこの問題を解決できる。
install
yarnかnpmで入れる。
$ yarn add --dev css-hot-loader or $ npm i --dev css-hot-loader
webpack.config.babel.js
css-hot-loader
を先頭にしてcssのloaderの設定に入れるだけ。
module: { rules: [ { test: /\.scss$/, use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'], })), }, ], },
これでextract-text-webpack-pluginで読み込ませてるcssファイルのhot module replacementが有効にできる。