webpack怎么打包apk_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的列子就成功了。