Webpack5实战笔记----12.url-loader处理图片

安装url-loader:

npm i url-loader -D

 修改webpack.config.js

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/"
    },
    module: {
        rules: [{
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1,
                        esModule: false
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                //修改file-loader配置的写法
                use: [{
                    loader: 'url-loader',
                    options: {
                        //哈希截取，让图片的名字变短
                        // name: '[name].[hash:6].[ext]',
                        // //在dist下面创建img目录
                        // outputPath: 'img'
                        //一般不用outputPath而是直接在name里面加img/
                        name: 'img/[name].[hash:6].[ext]',
                        limit: 25 * 1024
                    }
                }]
            }
        ]
    }
}

/**
 * 1.url-loader 以base64 的方式添加到文件当中，减少请求次数
 * 2.file-loader 将资源拷贝到指定的目录，分开请求
 * 3.url-loader 内部其实也可以调用file-loader
 * 4.limit 字段：超过数值做拷贝，没有超过只需要调用
 *  
 */

/**
 * 1.url-loader 以base64 的方式添加到文件当中，减少请求次数
 * 2.file-loader 将资源拷贝到指定的目录，分开请求
 * 3.url-loader 内部其实也可以调用file-loader
 * 4.limit 字段：超过数值做拷贝，没有超过只需要调用
 *  
 */

源代码：webpack5的案例演示