webpack使用url-loader打包图片,提升项目请求速度

1、url-loader的作用是将图片打包成base64字符串，不用在服务器单独请求图片，从而提升项目请求速度

//commonjs
const path = require('path');

module.exports = {
    mode: 'production',
    devtool:'source-map',
    entry: {
        main: './src/main.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]_[hash].[ext]',   //[name]代表使用图片本身的name,[hash]可以去掉,[ext]代表使用图片自己的扩展名
                            outputPath: 'images',   //代表图片输出到images目录下
                            limit: 10240   
                        }
                    }
                ]
            }
        ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

　//options中的limit代表大于10240byte 的图片使用file-loader,小于10240byte的使用url-loader