我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:webpack4系列教程,如何处理css/js文件中的图片? - webpack-css-img
webpack4系列教程,如何处理css/js文件中的图片?(图5-1)

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

安装并配置url-loader

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

安装命令如下:

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文件中的图片? - webpack-config-url-loader
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文件中的图片? - webpack-config-url-loader-base64
webpack4系列教程,如何处理css/js文件中的图片?(图5-3)

配置文件,文件路径

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

苏南大叔:webpack4系列教程,如何处理css/js文件中的图片? - webpack-config-url-loader-public-path
webpack4系列教程,如何处理css/js文件中的图片?(图5-4)

mini-css-extract-pluginoptions里面,有个publicPath;在url-loaderoptions里面,也有个publicPath,同时还存在nameoutputPath

图片文件的最终输出路径是由下面(伪代码)所组成的:

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-pluginpublicPath。组成如下:

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文件中的图片? - webpack-img-convert
webpack4系列教程,如何处理css/js文件中的图片?(图5-5)

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

<img src='./bg.png'/>

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack