使用file-loader处理CSS中的图片

1.项目准备

首先准备一张背景图，放置到src目录下的img中

修改以下css文件

js文件和上一篇文章一样，不需要进行修改

下载file-loader(npm install --save-dev file-loader)

2.修改配置文件

file-loader和css-loader一样，是一个loader，所以配置要在module的rules中配置：

 其实file-loader总共干了两件事：

1.把本地的图片，复制一份，放到dist目录下的img目录中（目录结构是在loader的options参数中的name决定的）

2.把文件的路径换为正确的路径，写到css中

 

 

 文件前的‘../’是在MiniCssExtractPlugin.loader这个loader中的publicPath参数中配置的。

展示成功