webpack源码之loader机制

dmlllll 发布于2019-08-22 16:03 / 3042人阅读

摘要：用于对模块的源代码进行转换。甚至允许你直接在模块中文件和区别之前一篇文章中介绍了机制和今天研究的对象他们两者在一起极大的拓展了的功能。原理说明上面是源码中执行关键步骤递归的方式执行执行机流程似于中间件机制参考源码参考文档

loader概念

loader是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构。

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

loader和plugin区别

之前一篇文章中介绍了plugin机制,和今天研究的对象loader,他们两者在一起极大的拓展了webpack的功能。它们的区别就是loader是用来对模块的源代码进行转换,而插件目的在于解决 loader 无法实现的其他事。为什么这么多说呢?因为plugin可以在任何阶段调用,能够跨Loader进一步加工Loader的输出,执行预先注册的回调,使用compilation对象做一些更底层的事情。

loader用法 配置

module: {
    rules: [
      {
        test: /.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  }

内联

import Styles from "style-loader!css-loader?modules!./styles.css";

CLI

webpack --module-bind "css=style-loader!css-loader"

说明上面三种使用方法作用都是将一组链式的 loader, 按照从右往左的顺序执行,loader 链中的第一个 loader 返回值给下一个 loader。先使用css-loader解析 @import 和 url()路径中指定的css内容,然后用style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

loader实现

//将css插入到head标签内部
module.exports = function (source) {
    let script = (`
      let style = document.createElement("style");
      style.innerText = ${JSON.stringify(source)};
      document.head.appendChild(style);
   `);
    return script;
}
//使用方式1
resolveLoader: {
   modules: [path.resolve("node_modules"), path.resolve(__dirname, "src", "loaders")]
},
{
    test: /.css$/,
    use: ["style-loader"]
},
//使用方式2
将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可

说明上面是一个简单的loader实现,同步的方式执行,相当于实现了style-loader的功能。

loader原理

function iteratePitchingLoaders(options, loaderContext, callback) {
    var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
    // load loader module
    loadLoader(currentLoaderObject, function(err) {
        var fn = currentLoaderObject.pitch;
        runSyncOrAsync(
            fn,
            loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
            function(err) {
                if(err) return callback(err);
                var args = Array.prototype.slice.call(arguments, 1);
                if(args.length > 0) {
                    loaderContext.loaderIndex--;
                    iterateNormalLoaders(options, loaderContext, args, callback);
                } else {
                    iteratePitchingLoaders(options, loaderContext, callback);
                }
            }
        );
    });
}

说明上面是webpack源码中loader执行关键步骤,递归的方式执行loader,执行机流程似于express中间件机制

参考源码
webpack: "4.4.1"
webpack-cli: "2.0.13"
参考文档
https://webpack.js.org/concep...

云服务器 GPU云服务器源码中文说明之 java安全机制源码 Loaders Loader

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93998.html

webpack源码之运行流程

摘要：引言通过前面几张的铺垫下面开始分析源码核心流程大体上可以分为初始化编译输出三个阶段下面开始分析初始化这个阶段整体流程做了什么启动构建，读取与合并配置参数，加载，实例化。推荐源码之源码之机制源码之简介源码之机制参考源码引言通过前面几张的铺垫,下面开始分析webpack源码核心流程,大体上可以分为初始化,编译,输出三个阶段,下面开始分析初始化这个阶段整体流程做了什么? 启动构建，读...

kviccn 2019-08-22 16:04 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
webpack源码之plugin机制

摘要：调用的目的是为了注册你的逻辑指定一个绑定到自身的事件钩子。这个对象在启动时被一次性建立，并配置好所有可操作的设置，包括，和。对象代表了一次资源版本构建。一个对象表现了当前的模块资源编译生成资源变化的文件以及被跟踪依赖的状态信息。引言在上一篇文章Tapable中介绍了其概念和一些原理用法,和这次讨论分析webpack plugin的关联很大。下面从实现一个插件入手。 demo插件 f...

glumes 2019-08-22 15:51 评论0 收藏0
webpack源码分析之三：loader

摘要：本次介绍的则是用来解决这类问题的。实现模块实现思路将配置内的命令的的内联从前至后组成一个数组。所有字符串内部又可以截取，获取完整的。分析并解析该数组内的字符串，获取各个的绝对路径。前言在webpack特性里面，它可以支持将非javaScript文件打包,但前面写到webpack的模块化打包只能应用于含有特定规范的JavaScript文件。本次介绍的loader则是用来解决这类问题的...

laznrbfe 2019-08-26 12:01 评论0 收藏0
单文件组件下的vue，可以擦出怎样的火花

摘要：线上另加入了排行榜功能，如需查看源码的，请切换到分支整个项目结构清晰，尤其单文件组件的表现力尤为突出，使得每个组件的逻辑都没有过于复杂，而且在的统筹下，的单向数据流模式使得所有的变化都在可控制可预期的范围内。 2016注定不是个平凡年，无论是中秋节问世的angular2，还是全面走向稳定的React，都免不了面对另一个竞争对手vue2。喜欢vue在设计思路上的先进性(原谅我用了这么一个...

Keven 2019-08-19 18:21 评论0 收藏0