Webpack4 学习笔记 - 02：loader 打包静态资源（图片）

什么是 loader？

看官网的解释：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

下面就通过例子来演示。

向src文件夹中添加一张图片 triss.jpg：

然后修改index.js文件中的代码：

import triss from './triss.jpg';

var img = new Image();
img.src = triss;

var root = document.getElementById('root');
root.append(img);

运行 npm run bundle 来打包，会发现报错了：

错误提示说 triss.jpg 这个文件打包出了问题，这是因为 webpack 只能处理 js 文件，遇到 jpg 文件，它就懵逼了，不知道该怎么处理，然后就报错。想让它处理非 js 文件该怎么办呢？这就要用到 loader 了！

使用 loader

webpack 不知道怎么处理 jpg 文件，我们就通过配置项来告诉它怎么处理，修改 webpack.config.js 文件如下：

const path = require('path'); // 得到的path为webpack.config.js所在的目录

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/, // webpack遇到.jpg|.png|.gif结尾的文件，就求助于url-loader来帮忙打包
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]', // 原文件名 原后缀
                    outputPath: 'images/', // 输出路径为  dist目录下的images目录
                    limit: 2048 // 设置2048个字节，当图片大小超过该值，输出图片文件，当图片大小小于该值，以base64编码的形式输出图片
                }
            }
        }]
    },
    mode: 'development'
}

新增一个 module，配置规则 rules，写法是固定的，可查看官网文档。这里使用 url-loader 来打包图片文件，具体的配置看代码注释，写好配置规则之后，安装 url-loader：

npm install url-loader -D

接着运行命令执行打包，就会看到在 dist 目录下创建了一个 images 目录，triss.jpg 也被打包了进来：

打开 index.html 查看：

可以看到，图片正确的显示出来了，到此为止，这一个使用loader的列子就成功了。