javascript - Webpack HotModuleReplacement css

Question

我正在尝试使用 webpack 来替代 gulp 和 livereload 工作流程。我已经设置了 HotModuleReplacement 插件，它对 JS 文件可以正常工作，但我无法让它与 SCSS 文件一起工作。它正在将 SCSS 正确编译为 CSS，但我每次都必须手动刷新浏览器才能显示样式更改。我在想这可能是我设置配置的方式或类似的错误。

我有这个正在运行的 server.js 文件:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    noInfo: true,   
    stats: { colors: true }
}).listen(3000, 'localhost', function (err, result) {
    if (err) {
    console.log(err);
    }

    console.log('Listening at localhost:3000');
});

和这个 webpack.config.js

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

var cssLoaders = ['css-loader'];
var jsLoaders = ['react-hot', 'babel'];
var scssLoaders = cssLoaders.slice(0);
scssLoaders.push('sass-loader?includePaths[]=' + path.resolve(__dirname, './styles'));

module.exports = {

  devtool: 'sourcemap',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './scripts/index'
  ],
  output: {
    path: path.join(__dirname, './build'),
    filename: 'bundle.js',
    publicPath: '/build/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin('styles.css')
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', '.scss']
  },
  module: {
    loaders: [
      { test: /\.js?$/, loaders: jsLoaders, include: path.join(__dirname, 'scripts'), exclude: /node_modules/},
      { test: /\.css$/ ,loader: ExtractTextPlugin.extract('style-loader', cssLoaders.join('!')) },
      { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', scssLoaders.join('!')) }
    ]
  }
};

在我的一个 js 文件中，我只是像这样调用 SCSS 文件:

require('../styles/app');

我已经查看了相关文档，有一些说明建议您需要手动选择加入每个模块，但我不确定为什么会这样，在哪里添加该代码等我正在尝试做的事情似乎是一个非常直接的用例，所以这是否受支持，或者我是否还必须仅针对样式使用 gulp 和实时重新加载？

Answer 1

不幸的是，extract-text-webpack-plugin 将您的所有样式提取到一个 CSS 文件中，它不能很好地支持热重载(参见 https://github.com/webpack/extract-text-webpack-plugin/issues/30)。

只要检测到 任何 热重载事件发生，这段 JavaScript 代码就会重新加载所有样式表。不过，它可能会很烦人，并且在 Firefox 上比在 Chrome 上运行得更好 - Chrome 似乎会延迟应用新样式表，直到您将焦点放在浏览器选项卡上。

if (module.hot) {
    $(window).on("message onmessage", function(event) {
        if (typeof event.originalEvent.data === "string" && event.originalEvent.data.indexOf("webpackHotUpdate") === 0) {
            console.log("Reloading style sheets...");
            document.styleSheets.forEach(function (sheet) {
                if ((sheet.href || "").indexOf('localhost') !== -1) {
                    sheet.ownerNode.href = sheet.href;
                }
            });
        }
    });
}

可能有一些方法可以进一步深入到热重载代码的内部，但我还没有研究过。