Webpack5快速入门（三）媒体资源的打包 手把手带你打开前端工程化的大门

目录

file-loader的使用🐸

设置图片名称与输出🐯

url-loader的使用🐨

asset处理图片🐻

---

个人主页：小杰学前端

webpack5第一期：快速入门webpack5

webpack5第二期：CSS相关loader的使用及兼容性处理

因为这是一个系列的学习并且后面的内容用的都是前面创建的项目，所以最好先阅读一下前面两篇文章

file-loader的使用💨

首先把之前入口文件index.js里的内容都删掉，然后来到 js 目录中新建一个 Image.js 文件

function packImg () {
    const oEle = document.createElement('div')
    return oEle
}
document.body.appendChild(packImg())

这一步我们先创建一个容器，然后把它放在页面中，执行打包，打开浏览器，看看div标签有没有显示出来：

这样我们装在图片的容器就成功在页面中显示出来了，下一步就是在这个容器中创建img标签，设置src属性。

function packImg () {
    const oEle = document.createElement('div')
    //创建img标签，设置src属性
    const oImg = document.createElement('img')
    oImg.src = require('../img/01.jpg')
    oEle.appendChild(oImg)
    return oEle
}
document.body.appendChild(packImg())

执行 npm run build进行打包：

执行完打包后，就报错了，说缺少一个合适的 loader 来处理图片类型，所以我们就需要 file-loader。

安装 file-loader：

npm i file-loader -D

在webpack.config.js里进行配置，把下面的代码加入到 rules 下：

{
        test: /\.(png|jpg|svg|gif|jpeg)$/,
        use: ['file-loader']
}

重新执行 npm run build进行打包，打开浏览器，看看是否报错：

页面里出现了一个图片的标识，img标签的 src 属性 object moudle。为啥这里不是我们reuqire的路径呢？因为在webpack5里file-loader返回的是一个对象 {