前言

大家好呀，我是宇文所拓，这回来说说webpack如何将图片资源当模块使用，进行打包并在页面呈现的

还是说说咱们的项目目录结构：

图片资源

对于图片资源，无非两种形式
1.img src
2.background url
接下来会对这两种形式分别进行讲解。

img src

在js文件夹下创建 image.js ,这里还是一样，使用原生js直接创建元素的方式：

function Img() {
    const oEle = document.createElement('div');

    const oImg = document.createElement('img');
    oImg.src = require('../img/01.jpg');
    oEle.appendChild(oImg);

    return oEle
}

document.body.appendChild(Img());

使用 require 方式来引入图片路径，别忘了在入口文件中引入 image.js ，然后进行项目的打包 npm run dev，此时，在控制台会出现报错，这是正常的错误：

错误信息提示，需要使用loader，这里缺少loader来处理图片，由此就引出了 file-loader

file-loader

file-loader 的作用是将文件发送到输出目录
因为它是独立的插件，所以对它进行安装 npm i file-loader -D 。

在 webpack.config.js 中配置，图片的格式不止一种，所以配置如下：

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

进行打包 npm run dev ，在页面查看没有出来：

控制台进行元素的查看，发现 img 标签是有的，但是 src 路径变成了 [object Module] ，很明显这里变成了一个对象。

要怎么去处理这个问题呢，也很简单，仅需要在动态创建 img 标签（image.js）里 src的地方加上一点点代码，如下：
oImg.src = require('../img/01.jpg').default;

file-loader 更新过后，为了适配 webpack5 ,现在返回的是对象的形式，{default xxx},需要用 .default 取出来。

如果觉得 .default方式不太雅，也可以进行配置来处理这个问题

module:{
    rules:[
        {
            test:/\.(png|svg|gif|jpe?g)$/,
            use:[
                {
                    loder:'file-loader',
                    options:{
                        esModule:false
                    }
                }
            ]
        }
    ]
}

重新进行 npm run dev 打包，就能在页面上看到图片了。

还有一种方式，直接使用esModule模式：

import imgSrc from '../img/01.jpg';

function Img() {
    const oEle = document.createElement('div');

    const oImg = document.createElement('img');
    oImg.src = reimgSrc; //此方式不需要在webpack.config.js中设置options：{esModule:false},直接使用
    oEle.appendChild(oImg);

    return oEle
}

document.body.appendChild(Img());

以上就是三种处理方式，供选择。

background url

对于 css 样式中的背景图，webpack也有它的处理方式，下面来看看。

回到 image.js ，并添加代码：

const aImg = document.createElement('div');
aImg.className = 'bg';
oEle.appendChild(aImg);

创建一个 css 样式文件，添加 bg class样式:

.bg{
    width: 478px;
    height: 268px;
    background-image: url('../img/02.jpg');
}

打包并在网页查看，图片没有出来，控制台检查元素，发现图片路径这样：

图片路径显然是不对的，有问题，到打包生成的 dist 文件夹下，发现有三个图片：

一个是前面 img 标签的图片，一个是 css 样式中的背景图片，还有一个呢？根据浏览器样式中的图片路径得知，获取引入的是 40 结尾的 jpg 。

在 dist 文件夹中找到这个 40 结尾的图片，打开它，发现不能直接打开，但可以用编辑器打开。

能看到这里类似于导出文件的操作，42 结尾的 jpg 就是最终要使用的 css 样式中的背景图，
打包后多了这个中间文件，并在浏览器中引入，而不是直接使用的图片，所以才出现了问题。

定位到了问题的所在，这时候就好处理这个问题。因为样式背景图所在的是一个 sss 文件，所以webpack需要进行处理，此时就使用到了 loader，在前一篇中，我们设置了关于样式的 css-loader 、postcss-loader 。

首先 postcss-loader 对样式进行兼容处理（加前缀），之后给到 css-loader ，css-loader 对 css 样式文件进行处理，当它看到 url 时会给替换成 require 语法，require 语法相当于默认导出 esModule 。

因此，需要的是 css-loader 直接给我们返回资源，而不是 esModule ，回到 webpack.config.js 中去，给 css-loader 设置参数，esModule 为 false。

{
    test: /\.css$/, //使用正则匹配.css后缀的文件
    //style-loader,css-loader有执行先后顺序，不然打包会出错
    use: ['style-loader',
        {
            loader:'css-loader',
            options:{
                esModule:false // 处理图片资源，关闭esModule
            }
        },
        {
            loader:'postcss-loader',
            options:{
                postcssOptions:{
                    plugins:[
                        require('autoprefixer'),
                        require('postcss-preset-env')
                    ]
                }
            }
        }
    ]
}

删除项目存在的 dist 文件夹，重新打包，查看 dist ，这时候就变化了，只存在两个图片了。

回到页面上，可看到，第二张图片也显示出来了。

到这里，图片资源在 webpack 中的基础应用就说完了，以上就是图片资源的两种处理方式，希望对你有所帮助，系列还会继续更新，请等待。。。

文章版权归作者所有，未经允许请勿转载。

THE END