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

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

本文的内容，和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/"
                        }
                    }
                ]
            },
        ]
    },
}

配置文件，图片base64

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

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

配置文件，文件路径

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

在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;

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

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

相关链接

• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-start.html

总结

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

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

• https://newsn.net/tag/webpack/

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