webpack中图片的处理
web开发中肯定会用到图片,那么webpack中对图片的处理也需要相应的loader;一般文件中引入图片有三种方式:
- js文件中通过
import imgSrc from './photo'; img.src = imgSrc
引入 - 在css文件中作为背景图引入
- 在html文件中直接引入
<img src='./photo' />
先说css情况,图片做为背景图引用时,打包css的loader中就会带有处理图片;
html中的文件需要使用html-loader
npm i html-loader -D
module: {
rules: [{
test: /\.(html)$/,
use: