webpack的url-loader和file-loader的区别

file-loader

rules: [{
            test: /\.(jpg|png|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name() {
                        return '[name].[ext]';
                    },
                    outputPath: 'images/'
                }
            }]
 }]

打包之后

使用file-loader打包之后会把对应规则的文件，复制一份到打包之后的文件夹，生成新的文件名，并传给项目的输入文件使用；

url-loader

const path = require('path');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name() {
                        return '[name].[ext]';
                    },
                    outputPath: 'images/'
                }
            }]
        }]
    }
}

使用url-loader打包之后

这里可以看到使用url-loader并没有把匹配到的文件复制一份到打包之后的文件夹中；
可是页面还是可以正常显示这些图片

打开浏览器的控制台可以发现，这里其实是将这些文件转化为base64
这样做的好处是减少这些文件的http请求；但是这样做又会带来新的问题，如果这个图片特比大，那么生成的js文件也会特别的大，那么就会增加加载js的时间；

最好的做法是options里面加一个limit

rules: [{
            test: /\.(jpg|png|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name() {
                        return '[name].[ext]';
                    },
                    outputPath: 'images/',
                    limit: 2048,
                }
            }]
        }]

这样子当文件小于2048才会把图片转化为base64打包到输出的js文件中，大于2048的图片则会跟file-loader一样复制到打包后的文件夹中