webpack 打包优化 file-loader 和 url-loader

通过 file-loader 和 url-loader 来打包图片字体文件

module: {
    rules: [{
        test: /.css$/,   //配置对应文件
        use: [
        'style-loader',  
        'css-loader'   //先执行后面的   先生成
        ] //调用对应打包工具
    }, {
        test: /.png$/,   //配置对应文件 
        use: {
            loader: 'url-loader', //小文件 用 url-loader   大文件 file-loader
            options: {  //会根据文件大小判断 符合要求使用url-loader 不符合用 file-loade　　r
                limit: 10 * 1024 //字节  实际 10kb
            }
        }
    }]
}

 

url-loader 实际转换成 dateUrl 

　data:image/png;base64,iVBORw0KGgo........AElEQVR4nO3d7VE   

使用dataUrl会减少请求次数, 单数如果大文件的话 base64会占用太大文件空间