webpack图片打包

1. js中创建
2. css中引入
3. <img src="">

yarn add file-loader -D

适合一二情况

{
    test: /\.(png|jpg|gif)$/,
    // 当图片小于多少，用base64,否则用file-loader产生真实的图片
    use: {
        loader: 'url-loader',
        options: {
            limit: 1,  // 200k 200 * 1024
            outputPath: '/img/',   // 打包后输出地址
            publicPath: 'http://www.mayufo.cn'
        }
    }
}

默认会内部生成一张图片到build,生成图片的路径返回回来

第一种情况: 图片地址要import引入，直接写图片的地址，会默认为字符串

import logo from './logo.png'

console.log(logo)
let image = new Image()

image.src = logo

document.body.appendChild(image)

第二种情况: css-loader会将css里面的图片转为require的格式

div {
    background: url("./logo.png");
   }

第三种情况: 解析html中的image

yarn add html-withimg-loader -D

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