webpack10——处理图片

如何使用在webpack使用图片，以及如何打包我们的图片

图片引入方式
1）在js中创建图片来引入
2）在css引入图片background(‘url’)
3)在html中使用img标签引入

1.在js中创建图片来引入

（1）在index.js中写入以下代码

import logo from ‘./gogo.jpg’   //必须这样引入和导入图片，返回一个新的图片地址
let image = new Image();
image.src = logo //这里写图片的路径
document.body.appendChild(image)

（2）安装file-loader， file-loader默认会在内部生成一张图片到build目录下，把生成的图片的名字返回来
（3）在webpack/config.js中进行配置

 {
                test:/\.(png|jpg|gif)$/,
                use:'file-loader'
   },

2.在css引入图片background(‘url’)

直接在css文件中写入【需要的插件是什么，file-loader】

body{
    background: url("./logo.jpg")
}

css-loader 会默认把url("./logo.jpg") 转换成url(require( “./logo.jpg”))
这种情况下，会默认铺满整个背景

3.在html中使用img标签引入

（1）安装html-withimg-loader -D这个插件
（2）在webpck.config.js中进行设置

  {
                test:/.\html$/,
                use:'html-withimg-loader'
            },

4.对于页面上的很小的图片，我们希望不用html请求

（1）安装url-loader
用途：做一个限制，当我们的图片小于多少k的时候，用base64来转化
点击查看，什么是base64
（2）在webpack.config.js中的设置

     {
                test:/\.html$/,
                use:'html-withimg-loader'
            },
            {
                test:/\.(png|jpg|gif)$/,
                //做一个限制，当我们的图片小于多少k的时候，用base64来转化
                
                // use:'file-loader' 不做限制时候的写法
                use:{
                    loader:'url-loader',
                    options:{
                        limit:200*1024 //如果图片小于200k，全部变成base64，否则用file-loader产生真实的图片。
                    }
                }
            },