webpack是目前使用对照风行的一个前端模块打包器，前真个任何资源都被当成一个模块来措置惩罚惩罚，如图片、css文件等等。在基于webpack构建的前端项目中，一般城市配置有关css文件措置惩罚惩罚的法则，这此中也包孕css文件中图片资源的措置惩罚惩罚，那么webpack到底是怎么措置惩罚惩罚它的呢？笔者之前也遇到过类似图片路劲的问题，为此还写过一篇博文webpack生成的css文件background-image url图片无法加载。今天就来说说webpack是怎么措置惩罚惩罚css文件中的图片路径的，首先上一个具体的例子。

一个具体问题

比来使用umi搭建前真个一个项目，在使用过程可能遇到一个umi的bug，为此还提出了一个issue 项目配置css module影响到css-loader对第三方库css文件中图片url的措置惩罚惩罚。趁便在简述下：

在项目中通过设置cssLoaderOptions.modules为true来开启css module

项目中引入了第三方库kindeditor的css文件。

import 'kindeditor/themes/default/default.css'

该default.css文件中有通过url引入图片资源，并且图片资源非相对路径写法，例如此中一处的写法:

.ke-toolbar-icon-url { background-image: url(background.png); }

然后通过npm start开启本地处事进行预览时，编译报错，如下图:

奇怪，明明对应的图片资源是存在的，webpack编译时为啥找不到呢？苦苦寻思了一番没有找到答案，于是一头扎进webpack和css-loader源码的海洋中开启"寻宝"之旅。

不卖关子了，导致上述的直接原因：

css-loader没有对css文件的url要领进行措置惩罚惩罚（转化为相对路径）

这样导致webpack在整合颠末loader措置惩罚惩罚后的default.css模块时，因为模块用到require(background.png)来引用图片资源，此时就用到Nodejs的模块加载机制，其具体可以检察本博客另一篇文章谈谈npm依赖打点，也可以检察nodejs官网module章节。nodejs在解析background.png图片路径时，会将其解析为第三方模块，这样会从node_modules中查找，通过在webpack中打印错误日志，可以今后中看出一些眉目，如下图，missing字段暗示查找过的路径均没有找到对应的资源文件。

umi内部其实使用css-loader-1(fork 而来)来措置惩罚惩罚css文件的， 导致css-loader没有对css文件图片路径进行措置惩罚惩罚的底层原因：

项目开启css module后，不该影响到node_modules中css文件的css module的情况而实际上孕育产生了影响；导致没有对第三方库中的css文件中图片路径进行措置惩罚惩罚

webpack是怎么转化css中的图片路径的？

如果纯挚为了解决上面问题就可以到此为止，但是处于好奇，终究被坑了几次，想知道webpack是怎么措置惩罚惩罚css文件中的图片路径的。例如我们在项目中这样写过css：

.xxa { background: url(background.png) }

或者这样：

.xxb { background: url(~alias/background.png) }

在项目中，岂论我们用less、stylus还是sass等css预措置惩罚惩罚库编写css，其最终是通过对应的loader如less-loader将编写的样式转换调动为css，然后通过css-loader来措置惩罚惩罚css中有关路径的转换，其感化拿其官网的介绍来说：

The css-loader interprets @import and url() like import/require() and will resolve them.

最常见措置惩罚惩罚css样式的项目，一般颠末以下几个loader从右到左挨次执行，拿less编写的样式来说，以内联loader的展示形式来说明：

!!css-loader!post-loader!less-loader!./xxx/xx.less

固然css-loader措置惩罚惩罚后还要颠末style-loader或者mini-css-extract-plugin供给的loader措置惩罚惩罚，但是这不在本次谈论范畴。

下面通过一幅图来看看颠末webpack解析模块到css产出这一过程，，webpack帮我们做了什么。

具体就来简单分析整个流程，可能分析有不正确的处所，还请大家攻讦斧正

NormalModuleFactory解析并创建模块

首先从入口文件（entry配置的文件）开始构建，使用NormalModuleFactory来解析并创建模块

NormalModuleFactory使用enhance-resolve来解析依赖的模块绝对地点，如果模块地点解析错误就会如文章开头的问题抛堕落误，解析正确则会创建依赖模块。如上图中的./index.css，模块地点解析告成后，webpack为index.css创建的模块属性如下图：

创建的一个模块，一般包孕模块的type、context、request、userRequest、rawRequest、resource、dependencies和loaders等模块相关信息。