express项目使用webpack-hot-middleware热更新，修改CSS时没有自动刷新

Question

我用express4生成器建了一个项目，使用webpack2来打包，因为有用node来启服务，所以用的webpack-hot-middleware进行热更新，但是发现修改css文件时webpack有重新build，但浏览器没有刷新，修改js文件是可以的

webapck.config.js如下：

var webpack = require('webpack');
var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var publicPath = 'http://localhost:3000/dist';
//路径是相对于package.json所在路径
var entry_map = {
  'index': ['./client/css/index.css','./client/js/index.js', hotMiddlewareScript],
  'home': ['./client/css/home.css','./client/js/home.js', hotMiddlewareScript],
}
module.exports = {
  entry: entry_map,
  // devtool: 'source-map',
  output: {
    path: path.resolve(process.cwd(),'./public/dist/'),
    //[name]-[hash].js可以指定hash值。
    filename: '[name].js',
    publicPath: publicPath
  },
  devServer: {
        //contentBase: DEV_PATH,
        historyApiFallback: true,
        // hot: true,
        open: true,
        inline: true,
        port: 3000
    },
  // plugins: [
  //   new ExtractTextPlugin("[name].css")
  // ],
  module: {
    rules: [
      {
        test: /\.js[x]?$/,
        exclude: /(node_modules)|(global\/lib\/)/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', publicPath: "/dist"})
      },
      {
        test: /\.scss$/,
        //!代表先执行 ？是传递给loader的参数，?sourceMap表示使用sourceMap， js使用sourcemap通过devtool: sourcemap来指定。
        loader: ExtractTextPlugin.extract({ fallback:'style-loader',use:'css-loader?sourceMap&-convertValues!sass-loader?sourceMap'})
      }
    ]
  }
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: '"production"'
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
            new ExtractTextPlugin({filename:'./[name].[hash].css', 
                allChunks: true
            }),
            new webpack.optimize.OccurrenceOrderPlugin()
        ],
        module.exports.devtool = false
} else {
    module.exports.plugins = [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: '"development"'
                }
            }),
            new ExtractTextPlugin({filename:'./[name].css', 
                allChunks: true
            }),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin()
        ],
        module.exports.devtool = '#eval-source-map'
}

修改css时可以看到控制台提示：

为什么提示没有修改？是没有监测css吗？

终端也有重新building

请问是什么原因？

Answer 1

隔了这么久终于找到一个方法，使用了css-hot-loadercss-hot-loader

Answer 2

ExtractTextPlugin 插件的问题，文件中添加一段代码即可自动刷新：

if (module.hot) {
  var hotEmitter = require("webpack/hot/emitter");
  hotEmitter.on("webpackHotUpdate", function(currentHash) {
    document.querySelectorAll('link[href][rel=stylesheet]').forEach((link) => {
      const nextStyleHref = link.href.replace(/(\?\d+)?$/, `?${Date.now()}`)
      link.href = nextStyleHref
    })
  })
}

详细的讨论及更多解决方案：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/30

Answer 3

有结论了吗？？？？？？？？？

Answer 4

我也遇到了，楼主可以解决了的话，请解答下哈