webpack之引入图片

前言：

本文演示了

• webpack如何在css文件中引入图片；
• webpack如何在html中引入图片；

需要安装配置的loader: file-loader;

为何要使用file-loader：

如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。

    其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

 

安裝file-loader

$ npm i -D file-loader

package.json目前配置：

配置webpack.config.js

 

在common下新增img文件夹,并添加图片dog.jpeg。

我目前用的项目目录：

示例一、在css中引入我们的图片

编写main.css

在我们的app.js中引入main.css

执行 npm run build构建项目。

 

示例二、在html中引入图片：重新编辑我们的app.js

执行 npm run build构建项目。