webpack-url-loader解决了项目中图片打包路径的问题

刚开始使用webpack的同学很容易掉进图片打包坑，比如打包的图片地址错误或者有些图片无法打包到我们的目标文件夹。

我们来分析一下图片在webpack项目中的应用场景。

1.1中的背景图片。CSS文件和其他设置

项目目录图：

以我的项目中的test.css为例。测试{ color:红色；宽度： 150 px；高度： 100像素；飞越：隐藏；背景： url('./img/[emailprotected]')无重复；背景尺寸： 150px自动；}.img-base64{ color:红色；宽度： 150 px；高度： 100像素；飞越：隐藏；背景： url('./img/media 1 . png’)不重复；背景尺寸： 100px自动；} # img-e { width :100 px；} 2.在}2.html文件中引入图片，下面是模板文件index.html

！doctype html lang=' en ' head meta charset=' utf-8 ' title web pack-img/title/head dy1 . CSS背景图片格式div class=' test '/div 2 . CSS的背景图像转换为base64 div class=' img-base64 '/div3.html引进的图像；divig src=' http : img/media 4 . png ' alt=' '/div4.js/image引入的图像引入于/body/html3.js

要求('./CSS/test . CSS ')；var imgSrc=require('./img/do . gif ')；var img=new Image()；img . id=' img-e '；img.src=imgSrcdocument . body . appendchild(img)；url加载程序

将图片引入webpack依赖于url加载器。

在webpack.config.js文件中，配置如下：

{ test:/\。(jpg|png|gif|bmp|jpeg)$/，loader: 'url-loader？限制=8192 name=img/[hash:8]。[姓名]。[ext]'} test属性表示可以匹配的图片类型。除了png和jpg，还可以添加gif，可以用竖线打开。

加载程序后面的限制字段代表图片打包限制。这个限制并不意味着图片超过限制就不能打包，而是当图片大小小于限制时，图片会自动转换为base64代码引用。在上面的例子中，大于8192字节的图片通常被打包，小于8192字节的图片在base64中被引用。

除了url加载器后的限制字段，还可以通过名称字段指定图片打包的目录和文件名

使用extractTextPlugin插件时，需要配置publicPath: './'.否则，css文件中背景图像的默认地址将在css文件夹中找到图像资源，导致项目图像路径不正确

webpack.config.js配置文件如下：

const web pack=require(' web pack ')const html web pack kkplugin=require(' html-web pack-plugin ')const ext plugin=require(' ext-text-web pack-plugin ')const path=require(' path ')const ext plugin=new ext plugin(' CSS/[name]).[hash:6].CSS ')//const optimizessesplugin=require(' optimize-CSS-assets-web pack-plugin ')；//压缩钢性铸铁插件module.exports={ //注意这里是出口不是入口：'。/src/js/main.js '，输出： {公共路径： } ./'，路径：路径。解析(_ dirname/' dist ')，//打包后的射流研究…文件存放的地方filename: 'js/[name].[hash:6].js' //打包后的射流研究…文件名}，plugins: [ extractCSS，new OptimizeCssAssetsPlugin()，//压缩新网页包。优化。uglifyjsplugin()，//new uglify()，//压缩js新的HTMlWebPackplugin({ filename : '索引。html '，模板： ' src/索引。html ' })]，模块： {规则3360 [//1.0的是装载机/处理射流研究…中的加载程序{ test: /\ .js$/，loader: 'babel-loader '，包含：路径。解析(_ dirname '，/src ')，//指定打包的文件排除：路径。解析(_ dirname，'/node_modules') //排除打包的文件，加速打包时间}, //处理钢性铸铁中的加载程序{ test: /\ .css$/，使用： extract textplugin。提取({回退： '样式加载器'，公共路径： './',使用： [ { loader: 'css-loader '，选项：{ minimize: true //css压缩} } ] }) }, //处理超文本标记语言模板中的加载程序{ test: /\ .html$/，loader: 'html-loader' }，//处理部署模板中的装载机，以。电信程序设计语言(电信编程语言的缩写)后缀结尾的{ test: /\ .tpl$/，loader: 'ejs-loader' }，//处理图片中的加载程序、文件加载程序、网址加载程序、图像-网络包-加载程序相互配合（图片格式转换base64图片压缩){ test:/\ .(jpg|png|gif|bmp|jpeg)$/，loader: 'url-loader？limit=8192 name=img/[hash :8].[姓名]。[ext]' }]} }；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。