如何将 webpack 用于 html5 srcset 图像

Question

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

Html:

下面的代码是使用 webpack 编译的，return 正常输出 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 用于 html5 srcset 图像

how to use webpack for html5 srcset images

html

webpack

webpack-3