时间戳

首页 > 解决方案 > 如何使用静态标签配置 Webpack CSS 热重载？

webpack - 如何使用静态标签配置 Webpack CSS 热重载？

问题描述

我正在尝试配置Webpack v5和webpack-dev-server v4.0.0-beta.3，并且无法为静态 HTML中的静态标签启用CSS 热重载。<link>我正在使用 API 来启动 Webpack 及其开发服务器。

包含完整测试用例的存储库：https ://github.com/tgrajewski/webpack_css_reload

使用 Webpack 配置从上述存储库中摘录：

compiler = webpack({
    'mode': 'development',
    'entry': './main.js',
    'devtool': false,
    'output': {
        'filename': 'out.js',
        'path': path.join(process.cwd(), 'build'),
        'publicPath': '/'
    },
    'module': {
        'rules': [
            {
                'test': /\.css$/,
                'use': ['style-loader', 'css-loader'],
            }
        ]
    },
    'stats': 'none',
    'infrastructureLogging': {
        'level': 'info'
    }
});

server = new WebpackDevServer(compiler, {
    'port': 8080,
    'devMiddleware': {
        'writeToDisk': true
    },
    'client': {
        'logging': 'info'
    },
    'static': [
        {
            'directory': 'build',
            'watch': true
        }
    ]
});

main.css修改文件时，我会重新加载整页。任何人都知道如何仅使用<link href="main.css" rel="stylesheet">内部的静态标签启用 CSS 热重载index.html？

标签： webpackwebpack-dev-server

解决方案

为了对任何文件启用 HMR，这个文件必须是 webpack 构建的一部分（所以它会监视它）。

在您的情况下，css文件不是此版本，因为html文件会加载它。

为了解决这个问题，您可以从文件中添加一个导入到 css 文件中main.js，这会将其添加到您构建的依赖关系树中。

顺便说一句，建议使用html-webpack-plugin以生成 html 文件。

我已经为你的演示做了一个 PR，它实现了上述所有内容。 https://github.com/tgrajewski/webpack_css_reload/pulls

推荐阅读