webpack 热更对css 和 html不起作用的问题

最新推荐文章于 2024-07-30 14:36:21 发布

原创

最新推荐文章于 2024-07-30 14:36:21 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文探讨了在webpack配置中遇到的热更新问题，当更新css或html文件时页面无法自动刷新。问题源于webpack-dev-server仅监听js文件，未包括css和html。解决方案包括在package.json中添加`--watch`参数以监听文件变化，引入CleanWebpackPlugin和css-loader，最终通过调整webpack配置实现css和html的热更新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

package.json

"scripts": {
   
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  }

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   
   
  entry:path.resolve(__dirname,'./src/main.js'),
  output: {
   
   
      path:path.resolve(__dirname,'./dist'),
      filename:'[name].bundle.js'
  },
  plugi