webpack打包(五)--使用loader处理图片

接上一篇webpack打包(四)--使用webpack-dev-server

src文件夹下面新建文件夹common,在common下面分别新建imgstyle文件夹

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-loaderfile-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
              }
         }]
 }

标签: 打包, 模块化

添加新评论