webpack基础（五）图片的处理

webpack打包图片

1. 在js中创建图片来引入
2. 在css来引入，比如background：url()
3. 在html中写死，<img src="">

1.js中引入图片

必须使用import require引入

import img from './Zebras.jpg'  //引入图片，返回结果是新的图片地址

let image = new Image();
image.src = img;
document.body.appendChild(image);

file-loader:默认会在内部生成一张图片到build目录下，把生成的图片名字返回回来

yarn add file-loader -D

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

2.css中引入

body {
  margin: 10px;
  background: url("./Zebras.jpg");
}

css-loader默认支持这种方式，实际会将地址替换为require('url')

3.在模板html文件中使用标签引入

yarn add html-withimg-loader -D

 {
                    test:/\.html$/,
                    use: [{
                        loader: "html-withimg-loader"
                    }]
                },

小图片base64

yarn add url-loader -D

将file-loader改为url-loader,上面三种引入只要满足条件，均会变成base64

{
                    //图片小于一定大小使用base64 否则使用file-loader产生真实图片
                    test: /\.(png|gif|jpg)$/,
                    use: [{
                        loader: "url-loader",
                        options: {
                            limit: 1,//小于限定使用base64
                            outputPath:'img/'   //图片输出的路径
                        }
                    }]
                }

base64会比原图大1/3。