html5图片怎么打包,webpack打包图片

在前端开发过程中，在html、css和js中都经常会需要引用图片，引用图片就需要考虑图片引入路径的正确性。当项目进行打包会将元素引用的图片进行抽取放在固定位置，如图1-1与图1-2所示，这就需要对图片的引入位置进行匹配。Angular-cli底层默认使用webpack进行项目压缩与打包，webpack是通过ulr-loader和file-loader配合完成打包后图片路径匹配工作，html中的图片需要使用html-withimg-loader。

图1-1打包后html中新的图片引用位置

图1-2打包后图片放置位置

url-loader与file-loader的区别

file-loader完成的工作是将图片打包到一个固定位置然后将新路径与元素重新匹配，url-loader有一个配置项limit当图片小于limit设置的大小，就将元素转换为base-64编码，当大于这个配置项大小就调用file-loader，也就是说url-loader底层依赖file-loader，但是安装完url-loader后不需要另外安装file-loader。

JavaScript中的图片路径匹配

Js代码中的图片路径匹配处理方式与html和css中处理方式有很大的不同，在js中的图片路径如果你需要进行打包就必须对其进行模块依赖标记，如图1-2所示，不然webpack无法分辨出这是一个图片路径还是一个普通的字符串。值得注意的是在js中使用es6模块语法import *  form形式即可，但是在typescript中图片的依赖标记需要使用不同的标记，本文使用的是common.js的形式，并且require需要在代码中进行声明，如图1-3所示。

图1-2代码中进行依赖标记的图片引用

图1-3对require进行声明

css中的图片路径匹配

css中对图片的引用不需要过多的处理，例如background这种属性对于图片的引用，loader会自动做出处理。

参考链接