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会自动做出处理。

参考链接

html5图片怎么打包,webpack打包图片相关推荐

vue-cl 有一些静态资源不想经过webpack打包那么应该public 下面
vue-cl3脚手架生成的项目,静态资源要是不想经过webpack打包,那么应该放置在public 文件夹下面,而不是以前的static文件夹下面.先说说vue-cl3 静态资源可以通过两种方式进行处 ...
atool-build脚手架分析与webpack打包原理详解
最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下.如果有不对的地方还烦请指正.不过 ...
html5图片怎么打包,webpack如何打包图片
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 初学webpack打包图片的时候,会遇到几种情况,需要注意. 首先在webpack中打包图片需要依赖于url-loade ...
webpack 图片的路径与打包
1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="backgrou ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
解决webpack打包样式url()背景图片问题
定位错误项目使用webpack4进行编译,打包后的样式中使用url方法指定的背景图片不能够正常显示源码戳这里 .bgurl{background-image: url('/images/abc.j ...
webpack打包js文件，图片路径错误，没有将图片打包的问题
初用 webpack 进行项目开发的同学会发现:在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中.这时是需要require的方式进行图片路径的引用,这样引用的图片就可以成功打包 ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
vue如何将图片压缩成webp格式并用webpack打包
一.vue-cli将图片转化成webp格式 1.安装vue-webp-plugin npm install --save vue-webp-plugin 2.配置webp-plugin(在main.j ...

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

html5图片怎么打包,webpack打包图片相关推荐

最新文章

热门文章