如何将 webpack 用于 html5 srcset 图像

【问题标题】：how to use webpack for html5 srcset images如何将 webpack 用于 html5 srcset 图像
【发布时间】：2018-01-25 17:37:14
【问题描述】：

在开发模式下，我对 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" />

【问题讨论】：

标签： html webpack webpack-3

【解决方案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 图像。

【讨论】：