AI 助理
备案控制台
开发者社区 云计算 文章 正文

webpack原理篇（六十一）：更复杂的 loader 的开发场

2023-02-24 187
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： webpack原理篇（六十一）：更复杂的 loader 的开发场

说明

玩转 webpack 学习笔记



loader 的参数获取

通过 loader-utils 的 getOptions 方法获取

const loaderUtils = require("loader-utils");
module.exports = function(content) {
  const { name } = loaderUtils.getOptions(this);
};


安装依赖，这里使用 1.2.3 版本的

npm i loader-utils@1.2.3 -S

0470f226aa064fb98cb67aba546c8c5e.png


在 run-loader.js 传递参数 name：

const fs = require("fs");
const path = require("path");
const { runLoaders } = require("loader-runner");
runLoaders(
    {
        resource: "./src/kaimo.txt",
        loaders: [
            {
                loader: path.resolve(__dirname, "./src/raw-loader.js"),
                options: {
                    name: "kaimo313"
                }
            }
        ],
        context: {
            minimize: true
        },
        readResource: fs.readFile.bind(fs),
    },
    (err, result) => {
        err ? console.error(err) : console.log(result)
    }
);


在 raw-loader.js 接收参数

const loaderUtils = require("loader-utils");
module.exports = function(source) {
  const { name } = loaderUtils.getOptions(this);
    console.log("raw-loader-getOptions-name->", name);
    const json = JSON.stringify(source)
    .replace('666', '313')
    .replace(/\u2028/g, '\\u2028' ) // 为了安全起见, ES6模板字符串的问题
    .replace(/\u2029/g, '\\u2029');
    return `export default ${json}`;
};


然后运行 node run-loader.js

a2750b3d4b1c413f8dc325e29aec171c.png



loader 异常处理


loader 内直接通过 throw 抛出

通过 this.callback 传递错误

this.callback(
    err: Error | null,
    content: string | Buffer,
    sourceMap?: SourceMap,
    meta?: any
);

const loaderUtils = require("loader-utils");
module.exports = function(source) {
  const { name } = loaderUtils.getOptions(this);
    console.log("raw-loader-getOptions-name->", name);
    const json = JSON.stringify(source)
    .replace('666', '313')
    .replace(/\u2028/g, '\\u2028' ) // 为了安全起见, ES6模板字符串的问题
    .replace(/\u2029/g, '\\u2029');
    // throw new Error("Error kaimo313");
    this.callback(new Error("Error kaimo313"), "");
    // return `export default ${json}`;
    // 可以回传多个值
    // this.callback(null, `export default ${json}`, 1, 2, 3, 4);
};


a2e0131a773a4eb38304699ce59c5051.png

this.callback(null, `export default ${json}`, 1, 2, 3, 4);


60be8b81ca284006b21dee641899080e.png


loader 的异步处理


通过 this.async 来返回一个异步函数


  • 第一个参数是 Error，第二个参数是处理的结果

示意代码：

module.exports = function (input) {
    const callback = this.async();
    // No callback -> return synchronous results
    // if (callback) { ... }
    callback(null, input + input);
};


新建一个 async.txt 的文件，添加 async kaimo313 的内容。

043319db579440dc867c133f410a0e62.png


添加异步读取文件

const loaderUtils = require("loader-utils");
const fs = require('fs');
const path = require('path');
const { callbackify } = require("util");
module.exports = function(source) {
  const { name } = loaderUtils.getOptions(this);
    console.log("raw-loader-getOptions-name->", name);
    const json = JSON.stringify(source)
    .replace('666', '313')
    .replace(/\u2028/g, '\\u2028' ) // 为了安全起见, ES6模板字符串的问题
    .replace(/\u2029/g, '\\u2029');
    // throw new Error("Error kaimo313");
    // this.callback(new Error("Error kaimo313"), "");
    // return `export default ${json}`;
    // 可以回传多个值
    // this.callback(null, `export default ${json}`, 1, 2, 3, 4);
    // 上下文方法 async
    const callback = this.async();
    fs.readFile(path.join(__dirname, './async.txt'), 'utf-8', (err, data) => {
        if(err) {
            callback(err, '');
        }
        callback(null, data)
    });
};


然后运行 node run-loader.js


115c9fa913c946fb87e23a62fce13390.png



在 loader 中使用缓存


webpack 中默认开启 loader 缓存


  • 可以使用 this.cacheable(false) 关掉缓存

缓存条件： loader 的结果在相同的输入下有确定的输出


  • 有依赖的 loader 无法使用缓存


const loaderUtils = require("loader-utils");
const fs = require('fs');
const path = require('path');
const { callbackify } = require("util");
module.exports = function(source) {
  const { name } = loaderUtils.getOptions(this);
    console.log("raw-loader-getOptions-name->", name);
    // 不开启缓存
    this.cacheable(false);
    const json = JSON.stringify(source)
    .replace('666', '313')
    .replace(/\u2028/g, '\\u2028' ) // 为了安全起见, ES6模板字符串的问题
    .replace(/\u2029/g, '\\u2029');
    // throw new Error("Error kaimo313");
    // this.callback(new Error("Error kaimo313"), "");
    // return `export default ${json}`;
    // 可以回传多个值
    // this.callback(null, `export default ${json}`, 1, 2, 3, 4);
    // 上下文方法 async
    const callback = this.async();
    fs.readFile(path.join(__dirname, './async.txt'), 'utf-8', (err, data) => {
        if(err) {
            callback(err, '');
        }
        callback(null, data)
    });
};



ac4d347be2534003b2a6a87cc2ce2e1e.png



loader 如何进行文件输出？

通过 this.emitFile 进行文件写入

const loaderUtils = require("loader-utils");
module.exports = function (content) {
    const url = loaderUtils.interpolateName(this, "[hash].[ext]", {
        content,
    });
    this.emitFile(url, content);
    const path = `__webpack_public_path__ + ${JSON.stringify(url)};`;
    return `export default ${path}`;
};


可以看一下 file-loader 的实现：https://github.com/webpack-contrib/file-loader/blob/master/src/index.js

import path from 'path';
import { getOptions, interpolateName } from 'loader-utils';
import { validate } from 'schema-utils';
import schema from './options.json';
import { normalizePath } from './utils';
export default function loader(content) {
  const options = getOptions(this);
  validate(schema, options, {
    name: 'File Loader',
    baseDataPath: 'options',
  });
  const context = options.context || this.rootContext;
  const name = options.name || '[contenthash].[ext]';
  const url = interpolateName(this, name, {
    context,
    content,
    regExp: options.regExp,
  });
  let outputPath = url;
  if (options.outputPath) {
    if (typeof options.outputPath === 'function') {
      outputPath = options.outputPath(url, this.resourcePath, context);
    } else {
      outputPath = path.posix.join(options.outputPath, url);
    }
  }
  let publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;
  if (options.publicPath) {
    if (typeof options.publicPath === 'function') {
      publicPath = options.publicPath(url, this.resourcePath, context);
    } else {
      publicPath = `${
        options.publicPath.endsWith('/')
          ? options.publicPath
          : `${options.publicPath}/`
      }${url}`;
    }
    publicPath = JSON.stringify(publicPath);
  }
  if (options.postTransformPublicPath) {
    publicPath = options.postTransformPublicPath(publicPath);
  }
  if (typeof options.emitFile === 'undefined' || options.emitFile) {
    const assetInfo = {};
    if (typeof name === 'string') {
      let normalizedName = name;
      const idx = normalizedName.indexOf('?');
      if (idx >= 0) {
        normalizedName = normalizedName.substr(0, idx);
      }
      const isImmutable = /\[([^:\]]+:)?(hash|contenthash)(:[^\]]+)?]/gi.test(
        normalizedName
      );
      if (isImmutable === true) {
        assetInfo.immutable = true;
      }
    }
    assetInfo.sourceFilename = normalizePath(
      path.relative(this.rootContext, this.resourcePath)
    );
    this.emitFile(outputPath, content, null, assetInfo);
  }
  const esModule =
    typeof options.esModule !== 'undefined' ? options.esModule : true;
  return `${esModule ? 'export default' : 'module.exports ='} ${publicPath};`;
}
export const raw = true;


可以看到使用了 interpolateName

29e15022ff0844e4b8d157c295544d1e.png


还有 emitFile


06949eef7f0f429fa52120b342a40100.png

https://github.com/webpack/loader-utils/tree/v1.2.3

使用多个占位符和/或正则表达式插入文件名模板。 模板和正则表达式在当前加载器的上下文中设置为名为 name 和 regExp 的查询参数。


const interpolatedName = loaderUtils.interpolateName(loaderContext, name, options);


8dc33171e5494199834fb24f69b9645e.png



我们在 loader-order 项目里安装依赖

7da49c1f321a4daeb3035e783003d653.png


然后在 a-loader.js 添加文件输出的代码

const loaderUtils = require("loader-utils");
module.exports = function(source) {
  console.log ('loader a is executed');
    const url = loaderUtils.interpolateName(this, '[name]_[hash].[ext]', source);
    console.log("url---->", url);
    this.emitFile(url, source);
  return source;
};


运行 npm run build，可以看到生成出来了 index 文件

726c127ed58c429e9110cbe466c18a76.png

我们可以看一下 dist 文件夹

5ac6a78f1bef471d858a575bc9647dd3.png





文章标签：
缓存
关键词：
Webpack loader
Webpack原理
Webpack开发
Webpack原理loader
Webpack原理篇
凯小默
目录
相关文章
html的七十二变
|
5月前
|
前端开发
在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
在Webpack配置文件中，通过设置`module.rules`来配置loader处理不同类型的文件。例如，使用`css-loader`和`style-loader`处理CSS文件，使用`file-loader`或`url-loader`处理图片等资源文件。配置示例：在`rules`数组中添加对应规则，指定`test`匹配文件类型，`use`指定使用的loader。
html的七十二变
253 8
html的七十二变
|
5月前
|
JavaScript 前端开发
Webpack中loader的使用场景
Webpack中的Loader用于处理和转换模块文件，如将TypeScript转为JavaScript、CSS预处理等，通过配置不同的Loader，可以灵活地支持多种文件类型和语言，实现模块化开发与构建优化。
html的七十二变
132 4
html的七十二变
|
5月前
|
前端开发 JavaScript
webpack 中 loader 和 plugin 的区别
在 webpack 中，loader 用于转换模块的源代码，如将 TypeScript 转为 JavaScript；而 plugin 则扩展了 webpack 的功能，可以执行更复杂的任务，如优化打包文件、注入环境变量等。两者共同作用于构建流程的不同阶段。
html的七十二变
158 5
大树营养快线
|
5月前
|
监控 前端开发 JavaScript
Webpack 中 HMR 插件的工作原理
【10月更文挑战第23天】可以进一步深入探讨 HMR 工作原理的具体细节、不同场景下的应用案例，以及与其他相关技术的结合应用等方面的内容。通过全面、系统地了解 HMR 插件的工作原理，能够更好地利用这一功能，为项目的成功开发提供有力保障。同时，要不断关注技术的发展动态，以便及时掌握最新的 HMR 技术和最佳实践。
大树营养快线
98 5
大树营养快线
|
5月前
|
缓存 前端开发 JavaScript
Webpack 动态加载的原理
【10月更文挑战第23天】Webpack 动态加载通过巧妙的机制和策略，实现了模块的按需加载和高效运行，提升了应用程序的性能和用户体验。同时，它也为前端开发提供了更大的灵活性和可扩展性，适应了不断变化的业务需求和技术发展。
大树营养快线
189 4
大树营养快线
|
5月前
|
缓存 前端开发 JavaScript
webpack 原理
【10月更文挑战第23天】Webpack 原理是一个复杂但又非常重要的体系。它通过模块解析、依赖管理、加载器和插件的协作，实现了对各种模块的高效打包和处理，为现代前端项目的开发和部署提供了强大的支持。同时，通过代码分割、按需加载、热模块替换等功能，提升了应用程序的性能和用户体验。随着前端技术的不断发展，Webpack 也在不断演进和完善，以适应不断变化的需求和挑战。
大树营养快线
67 0
我是快乐的嘟嘟
|
6月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
107 10
dufadayang
|
6月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader，可以实现对这些资源的精细处理和优化，提升项目的性能和用户体验。在实际应用中，需要不断探索和实践，根据项目的具体情况进行灵活调整和优化，以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握，你将能够更好地应对各种复杂的资源处理需求，为项目的成功构建和运行提供坚实的基础。
dufadayang
171 1
dufadayang
|
6月前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作，可以实现对各种资源的精细处理和优化。在配置时，需要根据具体需求合理选择和排列 Loader，并注意它们之间的顺序和交互关系。同时，不断了解和掌握新的 Loader 以及它们的特性，有助于更好地发挥 Webpack 的强大功能，提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法，你将能够更加灵活地处理各种资源，满足项目的多样化需求。
dufadayang
150 2
dufadayang
|
6月前
|
前端开发 JavaScript
Webpack 常用 Loader 和 Plugin
【10月更文挑战第12天】Webpack 是一个强大的模块打包工具，能够将各种资源模块进行打包和处理。Loader 用于转换模块的源代码，如 `babel-loader` 将 ES6+ 代码转换为 ES5，`css-loader` 处理 CSS 文件等。Plugin 扩展 Webpack 功能，如 `HtmlWebpackPlugin` 自动生成 HTML 文件，`UglifyJsPlugin` 压缩 JavaScript 代码。通过合理配置和使用 Loader 和 Plugin，可以构建高效、优化的项目。
dufadayang
97 2

热门文章

最新文章

  • 1
    【vue】webpack打包vue项目并且运行在Tomcat里面
  • 2
    AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axio
  • 3
    webpack指南-webpack介绍-代码分割 - CSS
  • 4
    webpack 打包去掉控制台的console.log()
  • 5
    如何在本地运行 webpack 打包后的文件
  • 6
    webpack window 添加ES6支出
  • 7
    2.2.4 webpack 配置文件
  • 8
    Webpack入门教程二十八
  • 9
    一周精通Vue（四）webpack-Plugin
  • 10
    Webpack入门教程二十四
  • 1
    Webpack 插件底层的实现原理是什么？
    88
  • 2
    在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
    253
  • 3
    Webpack中loader的使用场景
    132
  • 4
    webpack 中 loader 和 plugin 的区别
    159
  • 5
    Webpack与Babel的进阶配置与优化
    115
  • 6
    配置 Webpack 进行代码分离的常见方法有哪些？
    81
  • 7
    如何配置 Webpack 进行代码分离？
    162
  • 8
    webpack相关配置
    107
  • 9
    工程化（webpack+vite）
    92
  • 10
    前端性能优化：Webpack与Babel的进阶配置与优化策略
    149

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 面向Web应用的三维建模实战
  • React Native 全量化实践—web 技术打造移动研发新模式

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • Html5和Webpack1：Webpack5打包工具介绍
  • WEB网页编程实战
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月