webpack只能打包以js结尾的文件,当我们引入其他格式文件时,就需要对应的打包规则.所以loader就是一种打包规则.我们需要配置不同的rules来应用不同的loader.

以.jpg为例

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    //当满足对应的rules时,应用对应的loader
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: 'file-loader'
            } 
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

在使用前需要npm install 对应的loader,详情查看官方文档

当满足某个rule时加载对应的loader,如果想对该loader进行额外的配置,需要在rule中添加对应的规则.详情查看官方api

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [{
            //文件格式匹配的规则
            test: /\.(jpg|png|gif)$/,
            //使用的规则
            use: {
                //使用的loader
                loader: 'url-loader',
                //loader的配置
                options: {
                    //打包生成文件的格式,路径,大小规则,等等
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            } 
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

图片loader

• file-loader: 将图片直接打包,生成单独文件夹

• url-loader: 可以进行配置当图片内存大时才单独打包,不然就直接生成在js文件里面.这样可以减少http请求