Question

这是我的以下快速设置

 if(process.env.NODE_ENV.trim()==='development'){

    app.use(webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath,
      stats: {colors: true}
    }))

    app.use(webpackHotMiddleware(compiler, {
      log: console.log
    })) 

  }

webpack.config

module.exports = {
  entry:[
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client?http://0.0.0.0:8080&reload=true',
    './client/index.js'
  ],
  output:{
    path:__dirname + '/public',
    publicPath: '/',
    filename: 'bundle.js'
  },
  module:{
    rules:[
      {
        test:/(\.js|\.jsx)$/,
        exclude: /(node_modules)/,

        use: [
          {
            loader: 'react-hot-loader'
          },
          {
            loader: 'babel-loader',
          }
        ]
      },
      { test: /\.json$/, loader: 'json-loader' },
      {
        test: /(\.css|\.scss)$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader',loader: extract_loaders})
      },
      {
        test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader : 'file-loader'
      }
    ]
  },
  resolve:{
    extensions:['.js', '.jsx']
  },
  plugins:[
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
    new CopyWebpackPlugin([
      {from: 'client/images' ,to: 'public/images'}
    ]),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}

当我更新我的jsx文件时 - 该网站似乎更新。但是，当我更改我的css文件时，热更新不会发生

webpack似乎在css更改时正确编译。但由于某些原因，浏览器中未显示新的style.css文件。

如果它有任何帮助..我正在从我的HTML文件中导入style.css文件

<link rel="stylesheet" type="text/css" href="/style.css">

更新：当我更改我的css文件时，我在控制台中收到以下消息

[HMR] Checking for updates on the server...
[HMR] Nothing hot updated

当我更改.jsx

时，这不会出现

Answer 1

请不要在开发Webpack配置中使用ExtractTextPlugin，因为它会将您的样式提取到单独的文件中，因此HMR对此无能为力。快速修复：

       {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
            // use: ExtractTextPlugin.extract({
            //     fallback: "style-loader",
            //     use: "css-loader!sass-loader",
            // })
       }

Answer 2

由于你有babel和webpack，你可以在代码文件中导入你的css文件。

示例：

/dev/null

然后捆绑，加载应该有效。

Answer 3

也许问题在于进口线？你有没有反斜杠尝试过吗？（假设它在同一目录中）

<link rel="stylesheet" type="text/css" href="style.css">

webpack-hot reload - CSS样式表没有更新

3 个答案: