webpack 学习笔记二（loader 及 图片打包）

使用 loader-file 打包图片

项目结构

文件说明
webpack.config.js // 配置文件
loader-img/downloadFace.jpg // 图片
loader-img/index.js // index.js 文件
package.json // 安装初始化默认文件
package-lock.json // 安装初始化默认文件

webpack.config.js

var path = require('path')
module.exports = {
    // 默认为 production, 值有production（压缩版） 和 development（开发版）
    mode: 'development',
    entry: './loader-img/index.js',
    // 打包图片
    module: {
        // 规则
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                // 使用到的loader
                use: {
                    // 使用到的插件，需要安装
                    loader: 'file-loader'
                }
            },
        ]
    },
    output: {
        filename: 'loader-img.js',
        path: path.resolve(__dirname, 'dist')
    }
}

loader-img/index.js

var img = require('../loader-img/downloadFace.jpg')

然后命令行输入

npm run bundle

结果就在 配置出口 output 打包出结果