html - 如何将 webpack 用于 html5 srcset 图像

Question

在开发模式下，我对 html 图像使用 require 并使用 webpack 进行编译。

html:

下面的代码是使用 webpack 编译的，并以普通 html 的形式返回输出，但是如何将它用于 html5 srcset 2x 3x 图像？

<img src=<%=require("./images/test.png") %><!-compiled properly-->

<img src=<%=require("./images/test.png") %> srcset="images/test-2x.png 2x, images/test-3x.png 3x" class="img-fluid" />

Answer 1

在 webpack.config.js 中安装 srcset 加载器，然后使用以下规则。

 module: {
            rules: [
                   {
                    test: /\.(gif|png|jpg|svg)$/i,
                    use:[
                        {
                            loader: 'srcset-loader',
                        },
                        'file-loader?name=[name].[ext]&outputPath=images/',
                        'image-webpack-loader']
                  }
}

html:

 <img src=<%=require("./images/test.png")%> srcset="<%=require("./images/test-2x.png")%> 2x ,<%=require("./images/test-3x.png")%> 3x" class="img-fluid" />

现在使用此代码 webpack 将在生产模式下优化 2x 3x 图像。