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 的这个 hacky 位就会重新加载所有样式表。不过，它可能会很烦人，并且在 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;
                }
            });
        }
    });
}

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

Answer 2

如上所述，extract-text-webpack-plugin 不能正常使用热替换，不幸的是 :( 但是还有一个选项可以在开发过程中解决这个问题。那就是 disable 属性在提取插件设置中。

按如下所述修改您的配置：

plugins: [
    new ExtractTextPlugin('styles.css', {disable: process.env.NODE_ENV !== 'production'})
]

这将在开发时禁用 ExtractTextPlugin 的使用（我的意思是如果你运行它无论如何但 NODE_ENV=production webpack 或你喜欢的任何其他规则）并将你的样式捆绑在 js 中。

还请注意在入口点导入您的样式文件。希望有用。欢呼 ;)

PS。您也可以避免将入口点与 'webpack-dev-server/client?<a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a>'、'webpack/hot/only-dev-server' 组合起来，并通过运行ning webpack dev 手动将 new webpack.HotModuleReplacementPlugin() 添加到插件带有附加参数的服务器

webpack-dev-server --inline --hot

inline代表webpack-dev-server/client，--hot代表webpack-dev-server/client

Webpack HotModuleReplacement css

Webpack HotModuleReplacement css

javascript

sass

webpack