webpack html url图片,webpack4系列教程，如何处理css/js文件中的图片？

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

在css文件中，一般来说，是会需要一些图片来丰富其表现能力的。那么，webpack处理完css文件后，图片都是怎么处理的呢？如何保证其相对路径关系呢？这就是苏南大叔在本文中，将要给大家讲述的内容。

webpack4系列教程，如何处理css/js文件中的图片？(图5-1)

本文的内容，和webpack如何处理css文件还是有紧密关系的。建议您查看相关内容，链接见文末。新出现的loader角色是url-loader，本文中将要使用url-loader来处理css中的图片。本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、mini-css-extract-plugin@0.9.0、css-loader@3.5.3、url-loader@4.1.0。

安装并配置url-loader

在这里，苏南大叔默认您已经配置好了css相关的处理插件，接下来，我们来处理一下css中的图片文件。使用的loader叫做url-loader。当然，这里的图片，不但可以处理css中的图片，还可以处理js中import的图片。

安装命令如下：npm i url-loader -D

webpack.config.js配置如下：//...

module.exports = {

//...

module: {

rules: [

{

test: /\.css$/,

use: [

{

loader: MiniCssExtractPlugin.loader,

// options: {

// publicPath: '../',

// },

},

'css-loader',

],

},

{

test:/\.(png|jpg|gif|jpeg|svg)$/,

use:[

{

loader: "url-loader",

options: {

name: "[name].[hash:5].[ext]",

limit: 1024, // size <= 1kib

outputPath: "img",

publicPath: "../img/"

}

}

]

},

]

},

}

webpack4系列教程，如何处理css/js文件中的图片？(图5-2)

配置文件，图片base64

大家主要关注test:/\.(png|jpg|gif|jpeg|svg)$/附近这一段就可以了。这里有个options.limit的项目，控制的是图片的最终组成形态。如果图片小于等于这个阈值，就会表现为base64的一串代码，如果图片大于这个阈值，就会表现为独立文件。也就是说，css小图片通过这个设置，变成内嵌到css中的字符串，从而减少请求的连接数。

范例中的options.limit，赋值1024的意思就是1kb，就是小于等于1kb的图片，会被base64。

webpack4系列教程，如何处理css/js文件中的图片？(图5-3)

配置文件，文件路径

在webpack中，处理这些路径的时候，一直都是谜一般的存在。那么，处理这些图片的路径的时候，又是怎么组成的呢？当然还是需要查看url-loader这个loader。

webpack4系列教程，如何处理css/js文件中的图片？(图5-4)

在mini-css-extract-plugin的options里面，有个publicPath；在url-loader的options里面，也有个publicPath，同时还存在name、outputPath。

图片文件的最终输出路径是由下面(伪代码)所组成的：output["path"] + url-loader["outputPath"] + url-loader["name"]

而在css文件的代码中，引用路径的组成，是由下面几项(伪代码)所组成的：url-loader["publicPath"] + url-loader["name"]可以推断，两者publicPath是不同的哦，url-loader["publicPath"]是包含有url-loader["outputPath"]的路径定义的。如果两个publicPath都配置了的话，据实验结果，是以url-loader["publicPath"]为准。

如果url-loader没有定义publicPath的话，就会读取到mini-css-extract-plugin的publicPath。组成如下：mini-css-extract-plugin["publicPath"] + url-loader["outputPath"] + url-loader["name"]苏南大叔，个人推荐：使用url-loader["publicPath"]，不推荐使用设置output["publicPath"]。

引入图片的方式

css中引入的图片：

test.css:body{

background: url("./bg.png") left top repeat;

}

main.js:import "./test.css"

js中引入的图片：

main.js:import logo from './bg2.png';

document.getElementById('box').src = logo;

webpack4系列教程，如何处理css/js文件中的图片？(图5-5)

可以处理上述两种img图片处理方式，但是不支持处理下面的图片引入方式：

相关链接

总结

值得再次强调的是：本文中处理的是css/js中引用的图片，而在webpack项目里面，css是由js引入的。本文处理的对象不包括html中的图片！但是，如果html使用类似语句，进行的图片加载的话，是符合本文中的相关设定的。

更多webpack相关使用教程，请参考苏南大叔的博客：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。