Question

在开发模式下，我使用require for html images并使用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 loader使用以下规则。

 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图像。

如何使用webpack for html5 srcset图像

1 个答案: