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

7,879 阅读2分钟
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请求;但是图片太大时不推荐使用,会导致数据太大,加载过慢)