【填坑指南】webpack图片路径与打包问题

Webpack是一个模块打包工具。平时我们开发中为了提高开发效率会使用一些开发框架React、Vue等、拓展性语言Typescript、Flow等、CSS预处理器Scss/Sass/Less/Stylus等以及一些新语法特性ES6等，但是这些都是浏览器无法直接识别的。如果人工进行编译打包，那么是非常繁琐、费事的，而Webpack则可以将这些复杂的、大量的依赖包自动解析、编译并打包成细小的浏览器可识别的文件。

为什么在JavaScript中加载图片不能直接识别图片路径

因为在webpack中，除了js类型的文件是能够直接被识别并打包，其他类型文件（css、图片等）则需要通过特定的loader来进行加载打包，而图片则需要用到file-loader或url-loader。

在JavaScript中引入图片路径时，webpack并不知道它是一张图片，所以需要先用require将图片资源加载进来，然后再作为图片路径添加到对象上。

url-loader和file-loader功能基本一致，只不过url-loader能将小于某个大小（可以自定义配置）的图片进行base64格式的转化处理。

图片使用的场景

安装file-loader

npm i file-loader

yarn add file-loader

// webpack.conf.js

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

• 在CSS中使用，file-loader能自动识别CSS代码中的图片路径并打包到指定路径

// html
<img src="./images/bg_img.png">

// css
{ background: url("./images/bg_img.png"); }

• 在JavaScript中使用

// js
let uri = require('./images/bg_img.png');

let img = document.querySelector('img');
img.src = uri;

// vue
<img :src="require('./images/bg_img.png')">
<div :style="{backgroundImage: 'url(' + require('./images/bg_img.png') + ')'}"> // 这里动态加载图片的时候，使用background时不要添加其他属性，如：no-repeat、center等，如需要单独设置

url-loader

url-loader功能基本和file-loader一致，所以也可用url-loader替代。

url-loader还可对小于某个大小尺寸的图片进行base64格式的转化处理。

npm i url-loader

yarn add url-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['url-loader'],
                options: {
                    name: './images/[name].[ext]',
                    limit: 1024
                }        
            }
        ]
    }
}

limit属性的作用就是，将文件小于1024B大小的图片转成base64格式，而大于的则以file-loader方式打包处理。

使用file-loader方式打包：

使用url-loader方式打包：

如果不写limit属性，所有都不以url-loader方式打包

总结

1. 打包图片需要用到url-loader或file-loader
2. css中使用图片时，能够直接打包图片路径；js中使用图片时，先用require加载图片资源，然后再将路径传给对象
3. url-loader可以将图片格式转成base64（图片大小不大的时候推荐使用，如图标等，能够减少http请求；但是图片太大时不推荐使用，会导致数据太大，加载过慢）