这是我的以下快速设置
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
答案 0 :(得分:1)
请不要在开发Webpack配置中使用ExtractTextPlugin,因为它会将您的样式提取到单独的文件中,因此HMR对此无能为力。快速修复:
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
// use: ExtractTextPlugin.extract({
// fallback: "style-loader",
// use: "css-loader!sass-loader",
// })
}
答案 1 :(得分:0)
由于你有babel和webpack,你可以在代码文件中导入你的css文件。
示例:
/dev/null
然后捆绑,加载应该有效。
答案 2 :(得分:0)
也许问题在于进口线? 你有没有反斜杠尝试过吗? (假设它在同一目录中)
<link rel="stylesheet" type="text/css" href="style.css">