webpack处理图片文件

webpack处理图片文件，在webpack.dev.js和webpack.prod.js中分开写的

1、在webpack.dev.js中

直接引入图片 url

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

2、在webpack.prod.js中

直接引入图片 url对于线上是不友好的，
在生产环境时，使用url-loader

1. 如果图片小于 5kb 的图片用 base64 格式产出，打包到 img 目录下
   减少http请求
2. 否则，依然延用 file-loader 的形式，产出 url 格式

 rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 5 * 1024,
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]