如何配置Webpack v5与webpack-dev-server实现静态<link>的CSS热重载

你当前配置存在两个核心问题导致无法实现CSS热重载：

1. 你使用style-loader会将CSS内容打包注入到JS产物中，不会生成独立的CSS文件，页面静态<link>标签引入的main.css未被Webpack纳入构建流程，dev-server监听到该静态文件变化时只能触发整页刷新
2. 配置中未显式开启热模块替换（HMR）能力

步骤1：安装必要依赖 #

首先安装mini-css-extract-plugin，用于抽离独立CSS文件并支持热替换：

npm install mini-css-extract-plugin --save-dev

步骤2：修改Webpack配置 #

调整后的完整配置如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

compiler = webpack({
    'mode': 'development',
    'entry': ['./main.js', './main.css'], // 把main.css加入构建入口
    'devtool': false,
    'output': {
        'filename': 'out.js',
        'path': path.join(process.cwd(), 'build'),
        'publicPath': '/'
    },
    'module': {
        'rules': [
            {
                'test': /\.css$/,
                // 用MiniCssExtractPlugin.loader替代style-loader，抽离独立CSS
                'use': [MiniCssExtractPlugin.loader, 'css-loader'],
            }
        ]
    },
    'plugins': [
        // 配置输出的CSS文件名，和你页面link引入的路径一致
        new MiniCssExtractPlugin({ filename: 'main.css' })
    ],
    'stats': 'none',
    'infrastructureLogging': {
        'level': 'info'
    }
});

server = new WebpackDevServer(compiler, {
    'port': 8080,
    'hot': true, // 开启热模块替换
    'devMiddleware': {
        'writeToDisk': true
    },
    'client': {
        'logging': 'info'
    },
    'static': [
        {
            'directory': 'build',
            'watch': true
        }
    ]
});

// 原有启动服务的逻辑保留即可
server.start();

步骤3：确认页面link标签路径 #

确保index.html中的link标签引用的是Webpack输出到build目录的CSS路径，配置如下即可：

<link href="/main.css" rel="stylesheet">

修改完成后重启dev-server，修改main.css就能看到样式热更新，不会触发整页重载。

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