2-webpack4.x打包图片三大方法

pain2.jpg

三种方法：

一、在js 中创建图片来引入
二、在css中引入background('url')
三、<img src=" " alt=" ">

1.在js创建图片引入

1.安装yarn add file-loader -D 安装依赖，并配置webpack.config.js规则：
2.在导入的index.js文件中引入图片（file-loder会在内存生成一张图片 到 dist 目录下，生成图片的地址以logo）

import './index.css';
import logo from './22.jpg';   //返回的结果 logo 是一个新的图片的地址

let image=new Image();  //创建新的图片对象

image.src=logo;      //就是一个普通的字符串

// 将new 的图片插入到body 的后面
document.body.appendChild(image);

3.nom run dev运行得到结果：

小老弟.png

关于url-loader：当图片小于 options中设置的limit使用 base64 转码图片减少请求

2.在css中引入（第一步存在可略过）

1.安装yarn add file-loader -D 安装依赖，并配置webpack.config.js规则：

module:{    
        rules:[ //规则
           {    //使用 file-loader 可以`(png|svg|jpg|gif)` 格式的图片 嵌入 到css中
            test: /\.(png|svg|jpg|gif)$/,
               use: ["file-loader"]
           }
        ]
    },

2.css中background引入，再将css文件挂载到 index.js 文件中

//index.css
body{
    background-color: yellow;
}
div{
    width: 900px;
    height: 800px;
    background: url('../myImages/11.png');
}

3.npm run dev成功

pain.png

3.使用<img src=" " alt=" ">

1.安装loader:yarn add html-withimg-loader -D
2.webpack.config.js添加配置

  module:{    
        rules:[ //规则
            {
                test: /.css$/,
                use: ["style-loader","css-loader"]
            },
           {    //使用file-loader 可以图片 嵌入 到css中
            test: /\.(png|svg|jpg|gif)$/,
               use: ["file-loader"]
           },
           {
            test: /.html$/, //所有html结尾的文件添加此 loader 处理
            use: ["html-withimg-loader"]
           },
        ]
    },

3.在html文件中使用<img src=" ">路径引入即可

 <img src="../myImages/11.png" alt="">