webpack 5 webpack-dev-server 热更新失效无自动重编译问题求助

热更新不触发、修改代码不重编译修复 #

按以下步骤调整配置即可：

• 调整devServer配置，新增watchFiles指定监听src目录下所有文件，你当前配置仅监听dist目录（打包产物目录），源码改动自然无法触发检测
• 根配置新增watchOptions，解决Windows/WSL环境下文件系统监听失效问题
• 确认package.json的dev脚本使用webpack serve命令，而非旧版的webpack-dev-server

调整后完整配置示例：

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

module.exports = {
    mode: 'development', 
    entry: {
        main: path.resolve(__dirname,'src/index.js'),
    },
    output: {
        path:path.resolve(__dirname,'dist'),
        filename: 'app.bundle.js',
        hashFunction: 'xxhash64',
        clean: true // 新增：每次打包自动清理旧dist文件，避免缓存影响
    },
    devtool: 'inline-source-map',
    watchOptions: { // 新增：文件监听配置
        poll: 1000,
        ignored: /node_modules/
    },
    devServer: {
        static: {
            directory:path.resolve(__dirname,'dist'),
        },
        watchFiles: ['./src/**/*'], // 新增：监听src下所有文件改动
        port: 8080,
        open: true,
        hot: true,
        liveReload: true // 新增：热更新失败时自动刷新页面兜底
    },
    module: {
        rules: [
            {test: /\.css$/, use:['style-loader','css-loader']}
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        title: 'To Do List',
        filename: 'index.html',
        template: path.resolve(__dirname,"./src/index.html")
    })]
}

package.json脚本示例：

{
  "scripts": {
    "dev": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  }
}

import语句保存时被自动删除修复 #

该问题是VSCode默认的自动优化导入功能导致，导入的模块如果没有被代码实际调用，保存时会被自动移除，该问题也会导致webpack检测不到模块依赖变化，进而不触发重编译。修复方法：

• 确保你import的模块在index.js中有被实际使用
• 不需要该自动优化功能的话，打开VSCode设置，搜索JavaScript > Suggest: Auto Remove Unused Imports，关闭对应选项即可

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