如何阻止WebPack在HTML中引入已打包进JS的CSS文件

问题分析 #

你用style-loader把CSS打包进了popup.js，运行时会动态把样式插入页面，不需要单独的CSS文件。但HtmlWebpackPlugin还是自动生成了指向不存在的popup-styles.css的链接标签，导致资源加载错误。

解决方案 #

方案1：检查并删除模板中的手动引入标签 #

先确认你的src/popup.html模板里是不是本来就有<link rel="stylesheet" href="popup-styles.css" />这行代码。如果有，直接删掉就行——这是最常见的原因。

方案2：配置HtmlWebpackPlugin排除CSS资源注入 #

如果标签是打包器自动插入的，修改webpack.config.js里的HtmlWebpackPlugin配置，加个excludeAssets选项，阻止插件注入CSS类型的资源：

new HtmlWebpackPlugin({
    template: "./src/popup.html",
    filename: "popup.html",
    chunks: ["popup"],
    excludeAssets: [/\.css$/] // 匹配所有.css后缀的资源，排除注入
}),

方案3：确认style-loader配置正常 #

你当前的CSS模块规则是对的，style-loader会把CSS转成JS模块，运行时动态插入<style>标签：

{
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
}

这部分不用改，确保css-loader负责解析CSS、style-loader负责把样式注入JS即可。

验证修改效果 #

重新执行打包命令，查看dist/popup.html，确认冗余的<link>标签已经移除，同时页面样式依然正常生效。

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