webpack之html中的图片打包

方案一：url-loader

安装url-loader，并在webpack的module.rules中加入配置如下：

{
    test: /\.(png|jp?g|gif|svg|ico)$/,
    use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,        // 小于8192字节的图片打包成base 64图片
              name: 'images/[name].[hash:8].[ext]',
              esModule: false,  
              // 忽略esModule，html中的图片打包会出错，显示[object Module]
              publicPath: ''
            }
          },
     ]
},

在html中使用如下方式引入图片地址：

<img src="<%= require('../../assets/images/logo.png') %>" />

方案二：html-loader（推荐）

只用url-loader，图片的引入方式会显得有些繁琐。如果想要以html常规的方式引入图片，还需要安装一个html-loader插件，和url-loader配合使用。

在url-loader下方，添加如下配置：

{
    test: /\.(png|jp?g|gif|svg|ico)$/,
    use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,        // 小于8192字节的图片打包成base 64图片
              name: 'images/[name].[hash:8].[ext]',
              esModule: false,  
              // 忽略esModule，html中的图片打包会出错，显示[object Module]
              publicPath: ''
            }
          },
     ]
},
{
   test: /\.html$/,
   use: {
       loader: "html-loader",
   }
}

这样，html就可以已常规方式引入图片啦。

<img src="../../assets/images/logo.png" />