webpack loader打包图片文件

• 利用file-loader打包图片资源

const path = require('path')
module.exports = {
    mode: 'development',
    // mode: 'production',
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bundle')
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name]_[hash].[ext]',  // 使用占位符保持文件名一致,携带hash值
                    outputPath: 'image/'  // 指定文件的打包后存放路径
                }
            }
        }]
    }
}

• 使用url-loader打包图片，可以使用base64格式打包。
  base64的优点：减少http请求
  base64的缺点：如果图片文件过大，打包后js文件变大，只适用于小图片

module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',  // 使用占位符保持文件名一致,携带hash值
                    outputPath: 'image/',
                    limit: 2048  //如果文件超过2048kb就不以base64文件打包到js文件中
                }
            }
        }]
    }