loader原理
loader 概念
帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。
loader 执行顺序
了解执行顺序之前，需要先了解loader的分类
- pre： 前置 loader
- normal： 普通 loader
- inline： 内联 loader
- post： 后置 loader 执行顺序
- 4 类 loader 的执行优级为：
pre > normal > inline > post。
- 相同优先级的 loader 执行顺序为：
从右到左，从下到上。
// 此时loader执行顺序：loader3 - loader2 - loader1 module: { rules: [ { test: /\.js$/, loader: "loader1", }, { test: /\.js$/, loader: "loader2", }, { test: /\.js$/, loader: "loader3", }, ], }
// 此时loader执行顺序：loader1 - loader2 - loader3 module: { rules: [ { enforce: "pre", test: /.js$/, loader: "loader1", }, { // 没有enforce就是normal test: /.js$/, loader: "loader2", }, { enforce: "post", test: /.js$/, loader: "loader3", }, ], }
使用 loader 的方式
- 配置方式：在
webpack.config.js文件中指定 loader。（pre、normal、post loader）
- 内联方式：在每个
import语句中显式指定 loader。（inline loader）
inline loader
用法：import Styles from 'style-loader!css-loader?modules!./styles.css';
含义：
- 使用
css-loader和style-loader处理styles.css文件
- 通过
!将资源中的 loader 分开
inline loader 可以通过添加不同前缀，跳过其他类型 loader。
!跳过 normal loader。
import Styles from '!style-loader!css-loader?modules!./styles.css';
-!跳过 pre 和 normal loader。
import Styles from '-!style-loader!css-loader?
modules!./styles.css';
!!跳过 pre、 normal 和 post loader。
import Styles from '!!style-loader!css-loader?modules!./styles.css';
编写loader
loader其实就是一个函数，接收下面三个参数
content源文件的内容
mapSourceMap 数据
meta数据，可以是任何内容 最后返回处理后的内容。
loader 分类
- 同步 loader
module.exports = function (content, map, meta) { // 传递map，让source-map不中断 // 传递meta，让下一个loader接收到其他参数 this.callback(null, content, map, meta); return; // 当调用 callback() 函数时，总是返回 undefined };
- 异步loader注意：异步操作只能放在异步的callback调用
module.exports = function (content, map, meta) { const callback = this.async(); // 异步操作只能放在异步的callback调用 setTimeout(() => { callback(null, content, map, meta); }, 1000); };
- Raw loader此时的content是一个Buffer数据，所以处理图片，音频，视频等文件时，需要使用这个。
module.exports = function (content) { // content是一个Buffer数据 return content; }; module.exports.raw = true; // 开启 Raw Loader
- Pitching loader
module.exports = function (content) { return content; }; module.exports.pitch = function (remainingRequest, precedingRequest, data) { console.log("do somethings"); };
webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。
网络异常，图片无法展示
|
在这个过程中如果任何 pitch 有返回值，则 loader 链被阻断。webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader 。
网络异常，图片无法展示
|
// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "js/[name].js", clean: true }, module: { rules: [ { test: /\.js$/, use: [ "./loaders/loader04-pitching.js", "./loaders/loader05-pitching.js", ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, "./public/index.html") }) ], mode: "development" }
网络异常，图片无法展示
|
类似于koa中间件的执行顺序，洋葱模型。
loader API
| 方法名 | 含义 | 用法 |
| this.async | 异步回调 loader。返回 this.callback | const callback = this.async() |
| this.callback | 可以同步或者异步调用的并返回多个结果的函数 | this.callback(err, content, sourceMap?, meta?) |
| this.getOptions(schema) | 获取 loader 的 options | this.getOptions(schema) |
| this.emitFile | 产生(输出)一个文件 | this.emitFile(name, content, sourceMap) |
| this.utils.contextify | 返回一个相对路径 | this.utils.contextify(context, request) |
| this.utils.absolutify | 返回一个绝对路径 | this.utils.absolutify(context, request) |
一些loader的练习
clean-log-loader
通过正则匹配console.log()的内容，将其替换成空字符串。一些正则符号，请参考这里
module.exports = function (content) { // ? 表示非贪婪模式 return content.replace(/console\.log\(.*\);?/g, ""); }
add-message-loader
添加一些创建者的信息。
// loader.js module.exports = function(content) { const options = this.getOptions(); // 获取loader中传递的options const bannerText = ` /** * * author: ${options.author} * time: ${options.time} * */ ` return bannerText + content; }
上面的代码中，我们可以再使用loader时，传递任意值。如果想要限制，那么我们就必须给getOptions中传入一个JSON格式的约束。
{ "type": "object", "properties": { "author": { "type": "string" } }, "additionalProperties": false }
所以改变loader
const schema = require("./schema.json"); module.exports = function (content) { // 获取loader的options，同时对options内容进行校验 // schema是options的校验规则（符合 JSON schema 规则） const options = this.getOptions(schema); const prefix = ` /* * Author: ${options.author} || "zh" */ `; return `${prefix} \n ${content}`; };
上面这个loader中的options只能写author属性，并且类型只能是字符串类型，否则打包会报错。
babel-loader
编译 js 代码，将 ES6+语法编译成 ES5-语法。babel-core的工作
安装依赖
npm i @babel/core @babel/preset-env -D
编写loader
const babel = require("@babel/core"); const schema = require("./schame.json") module.exports = function(content) { const options = this.getOptions(schema); const callback = this.async(); babel.transform(content, options, function(err, result) { if(err) { callback(err) }else { // => { code, map, ast } callback(null, result.code) }; }); }
schema.json
{ "type": "object", "properties": { "presets": { "type": "array" } }, "additionalProperties": true }
file-loader
作用：将文件原封不动输出出去
npm i loader-utils -D
具体请访问这里编写loader
const loaderUtils = require("loader-utils"); module.exports = function (content) { // 1. 根据文件内容生成带hash值文件名 let interpolatedName = loaderUtils.interpolateName(this, "[hash].[ext][query]", { content, }); interpolatedName = `images/${interpolatedName}` // console.log(interpolatedName); // 2. 将文件输出出去 this.emitFile(interpolatedName, content); // 3. 返回：module.exports = "文件路径（文件名）" return `module.exports = "${interpolatedName}"`; }; // 需要处理图片、字体等文件。它们都是buffer数据 // 需要使用raw loader才能处理 module.exports.raw = true;
配置loader
{ test: /\.(png|jpe?g|gif)$/, loader: "./loaders/file-loader/index.js", type: "javascript/auto", // 阻止webpack默认处理图片资源，只使用file-loader处理 }
