webpack（4） 图片加载

图片处理（file-loader）

引用时出现的问题

在js中引入图片并添加到页面

let img = new Image();
img.src = './logo.png'
document.body.appendChild(img)

执行npm run dev

查看之后发现这个图片加载不出来，也就是说图片并没有被打包出来，此处的路径找不到图片

所以我们需要将图片以资源的形式引入进来

import logo from './logo'	//此时logo为一个文件名
let img = new Image();
img.src = logo
document.body.appendChild(img)

注意：若使用require方式引入时引入的是一个对象，需要不同的处理方式（有兴趣的朋友可以自己打印出来看下）

let logo = require ('./logo')	//此时logo为一个文件名
let img = new Image();
img.src = logo.default	//此处有变动
document.body.appendChild(img)

此时执行npm run dev发现由于缺少一个loader报错

解决问题

此处我们需要的是一个file-loader

npm i file-loader -D

在web.config.js中匹配对应的规则

{
                test: /.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              }

在此执行npm run devok 执行完成