Webpack与FancyBox结合时a标签href未正常处理问题求助

我懂你的痛点——Webpack自动处理了img的src路径，但a标签的href还停留在原始状态，导致两者指向的资源没法统一。这是因为默认情况下，file-loader（或者Webpack 5的Asset Modules）只会识别并处理img标签的src属性，不会对a标签的href做同样的处理。下面给你两种实用的解决方案：

方法一：用html-loader解析HTML资源引用 #

html-loader可以帮我们扫描HTML文件里的资源属性，包括a标签的href和img标签的src，让Webpack统一处理这些路径。

1. 先安装html-loader：

npm install html-loader --save-dev

2. 在你的webpack.config.js中添加处理HTML文件的规则，同时配置它处理a标签的href属性：

module.exports = merge(common, {
    // ... 其他原有配置
    module: {
        rules: [
            // 新增HTML处理规则
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            sources: {
                                list: [
                                    // 保留默认的img src处理
                                    {
                                        tag: 'img',
                                        attribute: 'src',
                                        type: 'src',
                                    },
                                    // 添加对a标签href的处理
                                    {
                                        tag: 'a',
                                        attribute: 'href',
                                        type: 'src',
                                    },
                                ],
                            },
                        },
                    },
                ],
            },
            // ... 你原有的JS、CSS、字体、图片等规则
        ]
    }
});

配置完成后，HtmlWebpackPlugin处理你的template.html时，会通过html-loader同时解析img的src和a的href，把它们替换成Webpack处理后的带hash的路径，两者就能指向同一个资源了。

方法二：Webpack 5+ 用Asset Modules替代file-loader #

如果你用的是Webpack 5及以上版本，官方更推荐用Asset Modules替代file-loader这类传统loader，配置会更简洁：

1. 先卸载file-loader（如果已经安装）：

npm uninstall file-loader

2. 修改图片处理规则为Asset Modules：

{
    test: /\.(png|jpg|gif|svg)$/,
    type: 'asset/resource',
    generator: {
        filename: 'imgs/[name].[hash].[ext]'
    }
}

然后同样添加上面提到的html-loader规则，就能达到和方法一一样的效果，a标签的href会被正确处理成带hash的路径。

验证效果 #

重新启动Webpack开发服务器，查看控制台的HTML结构，你会发现a标签的href现在和img的src完全一致，变成了类似imgs/laptop.762c6e8306d856f0dfba44f4a985aec1.jpg的路径，两者指向同一个资源了。

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