Webpack 5.90.1升级后--watch模式无法自动刷新问题求助

将Webpack升级至5.90.1版本后，设置--watch标志时的自动刷新功能停止工作，每次修改代码都需要手动执行构建命令。

我的package.json中devDependencies配置如下：

"devDependencies": {
  "@babel/preset-env": "^7.23.9",
  "css-loader": "^6.10.0",
  "html-webpack-plugin": "^5.6.0",
  "mkdirp": "^1.0.4",
  "style-loader": "^3.3.4",
  "webpack": "^5.90.1",
  "webpack-cli": "^4.10.0",
  "webpack-dev-server": "^4.15.1"
}

我使用以下命令执行开发构建：

webpack --config webpack.dev.config.js

命令可正常运行，但修改文件后不再自动处理变更。我曾尝试用path.resolve修正路径问题，目前在Windows 11的WSL环境下运行命令，工作目录位于Windows分区。

我的webpack.dev.config.js配置文件如下：

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

module.exports = {
  mode: 'development',
  watch: true,

  entry: {
    index: path.resolve(__dirname, "src", "index.js"),
    about: path.resolve(__dirname, "src", "about.js"),
  },

  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dev"),
  },

  devServer: {
    static: './dev',
    hot: true
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: true,
      chunks: ['index'],
      filename: 'index.html'
    }),
    new HtmlWebpackPlugin({
      template: './src/about.html',
      inject: true,
      chunks: ['about'],
      filename: 'about.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

解决方案 #

1. 修正命令与配置的冲突 #

你当前同时在配置中启用了watch: true，又配置了devServer，但运行的是普通webpack命令而非webpack serve。webpack-dev-server自带文件监听和热重载功能，不需要额外设置watch: true，建议移除配置中的watch: true项，改用以下命令启动：

webpack serve --config webpack.dev.config.js

2. 解决WSL跨分区文件监听问题 #

由于工作目录在Windows分区，WSL下的文件系统事件无法被webpack正常捕获，需要强制开启轮询模式。在webpack配置中添加watchOptions：

module.exports = {
  // ...其他配置
  watchOptions: {
    poll: 1000, // 每秒轮询一次文件变化
    ignored: /node_modules/ // 忽略node_modules目录，提升性能
  }
}

3. 统一路径配置（可选） #

将devServer.static改为path.resolve生成的绝对路径，避免相对路径可能引发的问题：

devServer: {
  static: path.resolve(__dirname, './dev'),
  hot: true
}

4. 重置依赖（可选） #

如果以上方法无效，可能是依赖缓存或版本兼容性问题，尝试清除依赖后重新安装：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Henry James