3

我正在使用带有 html-loader 的 webpack 在我的 dist 文件夹中创建一个 assets 文件夹。但我试图通过使用 data-src 链接更改 src 属性来实现图像的延迟加载。

我在文档中发现您可以指定其他属性，这就是我所做的。

rules: [
    {
        test: /\.html$/,
        use: {
            loader: "html-loader",
            options: {
                attributes: [':srcset',':data-srcset', 'img:data-src', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']
            }
        }
    },
    {
        test: /\.(svg|png|jpg|jpeg|gif)$/, // Ajouter les nouveaux types quand il y en a
        use: {
            loader: "file-loader",
            options: {
                name: "[name]-[hash].[ext]",
                outputPath: "assets",
                esModule: false
            }
        }
    }
]

<img data-src="./assets/image.jpg" alt="">

当我运行 webpack 时，我的图像不是在 dist 文件夹中创建的。

我在这里和这里发现了其他问题，但找不到一个好的答案。

4

2 回答 2

2

经过1天的研究。原来你需要使用 attrs 而不是属性。文档似乎是错误的......所以你应该有类似的东西。

test: /\.html$/,
use: {
    loader: "html-loader",
    options: {
        attrs: [':srcset',':data-srcset', 'img:data-src', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']
    }
}
于 2020-03-07T22:13:37.563 回答
0

现在（webpack 4）的正确语法如下：

{
    test: /\.html$/i,
    use: {
        loader: 'html-loader',
        options: {
            sources: {
                list: [
                    "...", // important, to correctly handle the default tags like 'src'
                    {
                        tag: "img",
                        attribute: "data-src",
                        type: "src",
                    },
                ]
            }
        }
    }
}

您将在此处找到详细说明： https ://webpack.js.org/loaders/html-loader/#sources

于 2021-09-03T14:00:31.177 回答