什么是 loader

2024-07-16 17:14| 来源: 网络整理| 查看: 265

前面在加载样式文件的时候介绍了很多 loader，每个 loader 都有不同的配置方法。实际上，Webpack 提供了多种方式来设置 loader 参数。本文就来详细说明如何配置一个 loader。

Webpack 默认只支持 CommonJS 规范。其他规范的模块，Webpack 需要借助于 loader 来解析。下面的样例展示了利用 babel 来加载 JavaScript 文件的 loader 配置。

const config = { module: { rules: [ { // 文件匹配条件，支持正则表达式或者函数 test: /\.js$/, // 文件目录匹配 include: path.join(__dirname, "app"), exclude: (path) => path.match(/node_modules/); // 针对匹配到的文件需要执行的动作 use: "babel-loader", }, ], }, }; 1234567891011121314151617# Loader 的顺序

在 Webpack 中，loader 是按从右向左，从下向上的顺序依次评估的。可以通过函数调用的方式加以理解。use: ["style-loader", "css-loader"] 等同于 style(css(input)) 。参考样例：

const config = { test: /\.css$/, use: ['style-loader', 'css-loader'], }; 1234

基于从右向左的原则，配置还可以改成这样：

const config = [ { test: /\.css$/, use: 'style-loader' }, { test: /\.css$/, use: 'css-loader' }, ]; 1234

正常情况下，通过上面的规则，我们可以实现各种处理顺序的 loader 定义。但是，有时候如果可以动态调整 loader 定义的顺序会给开发带来极大的遍历。这时候我们可以通过 enforce 这个字段来实现，enforce 取值为 pre 则 loader 会在其他 loader 之前执行，取值为 post 则 loader 会在其他 loader 之后执行。

代码规范静态检查配置可以很好的说明 enforce 的使用，通常我们需要在加载源代码的时候就检查代码规范，因此需要配置 enforce: "pre"。enforce:"post" 不太常用，通常会被用在对构建输出做校验的场景下。

const config = { test: /\.js$/, enforce: 'pre', // "post" too use: 'eslint-loader', }; 12345

通常来说，我们也可以通过纯代码的形式控制 loader 顺序，但是 enforce 提供了更多的遍历，同时也允许 loader 的配置分散在多个文件中，灵活性更好。

# loader 的参数

Webpack 支持通过 query 参数的形式给 loader 设置参数。

const config = { test: /\.js$/, use: 'babel-loader?presets[]=env' }; 1

这种传参方式同样可以被应用在源代码中。缺点是可读性差一些。

通常情况下，我们使用 use 来给 loader 传参：

const config = { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['env'] } }, }; 1234# 内联 loader 定义

通常情况下，我们通过 webpack 的配置文件来定义 loader，但是，Webpack 同时支持在源代码中通过内联的形式定义 loader。

import 'url-loader!./foo.png'; import '!!url-loader!./bar.png'; 12

一般来说，我们应该避免这么做，因为这样使得我们的源代码跟 webpack 产生了耦合。

我们也可以在 webpack 的 entry 配置中定义 loader。

const config = { entry: { app: 'babel-loader!./app' } }; 1# 通过 info 对象来加载资源

use 支持传递一个函数，返回 loader 配置。在这个函数里，我们可以根据环境等条件返回不同的配置。use 函数中必须返回一个值，可以为 falsy, object，或者字符串。

const config = { rules: [ { test: /\.js$/, use: [ (info) => ({ loader: 'babel-loader', options: { presets: ['env'] }, }), ], }, ], }; 12345678910111213

info 对象包含如下内容：

{ resource: '/webpack-demo/src/main.css', // 表示匹配到的资源路径 realResource: '/webpack-demo/src/main.css', resourceQuery: '', // 表示匹配到的资源的查询参数 issuer: '', // 表示引用这个资源的模块路径 compiler: 'mini-css-extract-plugin /webpack-demo/node_modules/css-loader/dist/cjs.js!/webpack-demo/node_modules/postcss-loader/src/index.js??ref--4-2!/webpack-demo/node_modules/postcss-loader/src/index.js??ref--4-3!/webpack-demo/src/main.css' } 1234567# 通过 resourceQuery 加载资源

可以通过 oneOf 字段，我们可以配置让 Webpack 根据不同的资源加载不同的 loader。

const config = { test: /\.png$/, oneOf: [ { resourceQuery: /inline/, use: 'url-loader' }, { resourceQuery: /external/, use: 'file-loader' }, ], }; 1234567

除了 resourceQuery，也可以使用 resourcePath.

# 通过 issuer 加载资源

issuer 可以用来根据引用者来加载不同的 loader。下面的例子，表示当一个 css 是被 JavaScript 文件引用的时候，需要加载 style-loader。

const config = { test: /\.css$/, rules: [{ issuer: /\.js$/, use: 'style-loader' }, { use: 'css-loader' }], }; 1234

issuer 也可以与 not 混用，

const config = { test: /\.css$/, rules: [ // 将被其他非 css 模块引入的 css 写入到 dom 中 { issuer: { not: /\.css$/ }, use: 'style-loader' }, { use: 'css-loader' }, // 处理 css 导入 ], }; 12345678# 调整 loader 匹配条件的各种方法test, include, exclude 是最常用的匹配条件，可以设置为正则表达式、字符串、函数、对象，或者一个数组。resource: /inline/ 匹配资源路径，包括查询参数，比如： /path/foo.inline.js, /path/bar.png?inline.issuer: /bar.js/ 当一个资源的引用方满足条件的时候，这个资源被匹配到。比如：/path/foo.png 如果被 /path/bar.js 引用了，则它就会被匹配。resourcePath: /inline/ 仅匹配资源路径，比如： /path/foo.inline.pngresourceQuery: /inline/ 仅匹配资源的查询参数，比如： /path/foo.png?inline.

同时还可以与下面的布尔型匹配条件组合使用。

not 不匹配某一个条件。and 同时满足一组条件。or 满足一组条件中的一个。# 总结

loader-runner 这个包可以不借助 Webpack 直接运行 loader, 可以帮助我们更好的理解 loader 的工作机制。通过将 inspect-loader 这个工具与 Webpack 配置结合起来，我们可以了解 loader 之间数据是如何传递的。

我们通过 loader 来配置 Webpack 根据不同的模块使用不同的处理机制。

一个 loader 定义包块匹配模块的条件和处理模块的动作。

Webpack 提供了多种定义 loader 的方式，我们可以根据不同的需求使用不同的配置。

关注微信公众号，获取最新推送~

加微信，深入交流~

【本文地址】

公司简介

联系我们