如何让Webpack 5的webpack-dev-server自动识别最新代码变更

数据老陈

2026-9-28

问题修复方案

你的webpack配置存在几处明显错误，是导致dev-server热更新失效的核心原因，按以下步骤修改即可：

问题1：重复实例化MiniCssExtractPlugin导致资源编译冲突

你同时引入了两次mini-css-extract-plugin，且在plugins数组中重复初始化了两个实例，会导致css资源编译异常，这也是你配置writeToDisk: true时报错的主要原因。

先删除重复的引入语句：const miniCss = require('mini-css-extract-plugin');
删除plugins数组中重复的实例化语句：new miniCss(),，仅保留1个MiniCssExtractPlugin实例即可

问题2：开发环境使用MiniCssExtractPlugin导致热更新失效

MiniCssExtractPlugin的作用是将css抽离为独立的.css文件，该插件对开发环境热更新的支持较差，dev环境应该使用style-loader代替它的loader位：
修改css和scss对应的规则：

// 处理普通css
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
},
// 处理scss/sass
{
  test: /\.(s[ac]ss|css)$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ]
},

如果需要兼顾生产环境的css抽离，可以加环境判断：
`use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']`

问题3：devMiddleware的publicPath配置错误

你当前配置的publicPath: "//localhost:8080"不符合webpack 5的规则，需要和output的publicPath保持一致，建议统一修改为'/'：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'main.js',
  publicPath: '/'
},
devServer: {
  // ...其他配置保留
  devMiddleware: {
    publicPath: "/",
  },
  // 新增pug等模板文件的监听配置
  watchFiles: ['src/**/*']
}