webpack热模块更换:css无需刷新

Question

到目前为止,我一直在使用livereload,这样每当我更改JS或模板时,页面都会刷新,当我更改CSS时,它会在没有刷新的情况下热切换新的CSS.

我现在正在尝试使用webpack并且几乎达到相同的行为,但有一个例外:当CSS更改时,它会刷新整个窗口.有没有可能让它热切换CSS而不刷新？

到目前为止的配置:

var webpackConfig = {
    entry: ["webpack/hot/dev-server", __dirname + '/app/scripts/app.js'],
    debug: true,
    output: {
        path: __dirname + '/app',
        filename: 'scripts/build.js'
    },
    devtool: 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: __dirname + '/app/index.html',
            inject: 'body',
            hash: true,
            config: config
        }),
        new webpack.ProvidePlugin({
            'angular': 'angular'
        }),
        new ExtractTextPlugin("styles.css")
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: "style!css!sass?includePaths[]=" + __dirname + "/app/bower_components/compass-mixins/lib&includePaths[]=" + __dirname + '/instance/sth/styles&includePaths[]=' + __dirname + '/app/scripts'
            }
        ]
    }
};

Answer 1

这是使用README项目ExtractTextPlugin中所述使用的缺点之一.您可以通过拆分配置来解决此问题.IE浏览器.有没有它的开发单独配置和一个用于生产的配置.

Answer 2

实际上有一个简单的方法可以做到这一点。我使用 sass-loader 和 extract-text-plugin 来生成 css 文件。

您需要做的是将 id 添加到您的 css include

  <link id="js-style" type="text/css" rel="stylesheet" href="/static/main.css">

现在，您需要确保当 HMR 发生时您使用当前版本/时间戳更新 url。您可以通过以下方式执行此操作：

import '../style/main.scss'
if (module.hot) {
  module.hot.accept('../style/main.scss', () => {
    const baseStyle = window.document.getElementById('js-style')
    baseStyle.setAttribute('href', '/static/main.css?v=' + new Date().valueOf)
  })
}

因此，每当 css 发生变化时，我们都会修复 css include 的 url 以重新加载它。