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" />
发布了6 篇原创文章 · 获赞 2 · 访问量 4788

猜你喜欢

转载自blog.csdn.net/u014259536/article/details/104907216

相关文章