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）。

这个hacky位的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;
                }
            });
        }
    });
}

可能有某种方法可以进一步深入了解热重新加载代码的内容，但我还没有研究过它。

Answer 2

如上所述，extract-text-webpack-plugin无法正常使用热替换，但不幸的是:(但在开发过程中如何解决此问题还有一个选择。禁用< / strong>提取插件设置中的属性。

按如下所述修改配置：

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

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

还要注意在入口点导入样式文件。希望有效。干杯;）

PS。此外，您可以通过运行带有其他参数的webpack dev服务器来避免将您的入口点与'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server'组合并手动将new webpack.HotModuleReplacementPlugin()添加到插件中

webpack-dev-server --inline --hot

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

Webpack HotModuleReplacement css

2 个答案: