【填坑指南】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请求；可是图片太大时不推荐使用，会致使数据太大，加载过慢）