webpack打包（五）--使用loader处理图片

接上一篇webpack打包（四）--使用webpack-dev-server

在src文件夹下面新建文件夹common,在common下面分别新建img和style文件夹

把src下面的main.css放到style里面，修改app.js里面样式的引用路径import "./common/style/main.css"

准备图片

两张图片，一张小于10kb，一张大于10kb即可，放到img目录

下载loader

npm i -D file-loader

file-loader能够处理图片资源

配置webpack.config

在rules里面增加处理图片规则

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

当匹配到以png或者jpg结尾的图片就起用file-loader处理

使用图片

app.js

import React from "react";
import ReactDOM from "react-dom";

import "./common/style/main.css"
import img1 from "./common/img/200kb.jpg";

const img2 = require("./common/img/200kb.jpg");

ReactDOM.render(
    <div>
        <img src={img1}/>
        <img src={img2}/>
        <img src={require("./common/img/200kb.jpg")}/>
        React
    </div>,
    document.getElementById("root")
);

上面是引用图片资源的几种方式

同样的在main.css里面使用图片和正常的css语法一样

body {
  background: url("../img/5kb.png");
}

运行

npm run dev

file-loader会把图片资源也打包到dist目录下

关于url-loader

url-loader和file-loader提供的功能相似，区别就是url-loader把图片资源以base64编码的方式编译到了脚本里面

使用url-loader

npm i -D url-loader安装模块

在webapck.config里面把file-loader名字改成url-loader即可，url-loader优点是可以减少对图片资源的请求,对应的缺点就是当图片资源很大或者很多的时候，大大的增加了编译后脚本的大小

优化

使用url-loader里面的配置，可以对图片选择性的进行base64编译，只有当图片小于10kb的时候，进行base64编译，url-loader提供一个limit配置，以字节为单位，在webapck.config里面把url-loader配置修改一下

{
    test: /\.(png|jpg)$/,
    use: [{
           loader: "url-loader",
           options: {
               limit: 10240
              }
         }]
 }