css-hot-loaderでcssファイルのhot module replacement

github.com

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が有効にできる。