Webpack：使用Loader打包图片

file-loader

webpack.config.js

const path = require('path'); //引入node核心模块

module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/, //打包的文件以jpg,png,gif结尾
            use: {
                loader: 'file-loader',
                options: { //file-loader配置项
                    //placeholder 占位符
                    name: '[name]_[hash].[ext]',//保持打包后的图片名字和原来一样
                    outputPath: 'images/'
                    //打包后的图片输出到images文件夹中
                }
            }
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}

url-loader

• 可以实现file-loader的一切功能。
• 会把图片转化成base64的字符串。
• 好处：不用额外的请求一个图片的地址
• 坏处：图片大。js文件大，会导致加载js的时间很长，一开始很长的时间，页面上什么东西都显示不出来
• 最佳方式：用url-loader打包1KB到2KB的图片，节约http请求

webpack.config.js

const path = require('path'); //引入node核心模块

module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: { 
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                    //图片小于2KB,则打包成base64,否则像file-loader一样打包
                }
            }
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}