精华内容
参与话题
问答
  • Loader技术原理

    千次阅读 2018-06-02 14:36:51
    Loader简介 什么是LoaderLoader是实现FusionInsight HD与关系型数据库、文件系统之间交互数据和文件的数据加载工具。基于开源Sqoop研发,做了大量优化和扩展。提供可视化向导式的作业配置管理界面;提供定时...

    Loader简介

    什么是Loader:

    Loader是实现FusionInsight HD与关系型数据库、文件系统之间交互数据和文件的数据加载工具。基于开源Sqoop研发,做了大量优化和扩展。提供可视化向导式的作业配置管理界面;提供定时调度任务,周期性执行Loader作业;在界面中可指定多种不同的数据源、配置数据的清洗和转换步骤、配置集群存储系统等。

    Loader的特点:

    • 图形化:提供图形化配置、监控界面,操作简便。
    • 高性能:利用MapReduce并行处理数据。
    • 高可靠:Loader Server采用主备双机;作业通过MapReduce执行,支持失败重试;作业失败后,不会残留数据。
    • 安全:Kerberos认证;作业权限管理。

    Loader的应用场景:

    这里写图片描述

    图:Loader的应用场景

    通过Loader,我们可以从关系型数据库或文件系统中把数据导入HBase或者Hive,HDFS中。反过来,Loader也可以从HDFS和HBase、Hive中导出数据。

    Loader在FusionInsight产品中的位置:

    这里写图片描述

    图:Loader在FusionInsight中的位置

    FusionInsight HD提供大数据处理环境,基于社区开源软件增强,安装场景选择业界最佳实践;Porter是FusionInsight HD的数据集成服务,提供与Hadoop集群多种交换数据方式(包括Loader,Flume,SFTP)及Hadoop图形界面(Hue)。

    Loader是实现FusionInsight HD与关系型数据库、文件系统之间交换数据和文件的数据加载工具。

    Loader系统架构

    Loader模块架构:

    这里写图片描述

    图:Loader模块架构图

    模块说明:

    名称 描述
    Loader Client Loader的客户端,包括WebUI和CLI两种交互界面。
    Loader Server Loader的服务端,主要功能包括:处理客户端请求,管理连接器和元数据,提交MapReduce作业和监控MapReduce作业状态等。
    REST API 实现RESTful(HTTP+JSON)接口,处理来自客户端的请求。
    Job Scheduler 简单的作业调度模块,支持周期ing的执行Loader作业。
    Transform Engine 数据转换处理引擎,支持字段合并、字符串剪切、字符串反序等。
    Execution Engine Loader作业执行引擎,包含MapReduce作业的详细处理逻辑。
    Submission Engine Loader作业提交引擎,支持将作业提交给MapReduce执行。
    Job Manager 管理Loader作业,包括创建作业、查询作业、更新作业、删除作业、激活作业、去激活作业、启动作业、停止作业。
    Metadata Repository 元数据仓库,存储和管理Loader的连接器、转换步骤、作业等数据。
    HA Manager 管理Loader Server进程的主备状态,Loader Server包含2个节点,以主备方式部署。

    Loader作业管理

    作业:

    作业用来描述将数据从数据源经过抽取、转换和加载至目的端的过程。包括数据源位置及数据源属性、从源数据到目标数据的转换规则、目标端属性。

    ​ Loader提供了诸多功能,用于管理与作业相关的操作。包括创建作业、导入作业、导出作业、迁移作业分组、批量删除作业、启动作业、停止作业、查看作业历史记录、复制作业和删除指定作业等功能。

    脏数据:是指不符和Loader转换规则的数据。

    作业转换规则:

    ​ Loader提供了丰富的作用转换规则,能将数据按照不同的业务场景进行转换和清洗,转换成目标数据结构,实际应用中,如果不需要转换,可以不指定转换规则。

    Loader提供了14中转换算子,描述如下:

    1. 长整型时间转换:实现长整型数值与日期类型的互换。
    2. 空值转换:将空值替换成指定值。
    3. 增加常量字段:生成常量字段。
    4. 随机值转换:生成羧基数据字段。
    5. 拼接转换:拼接已有字段,生成新字段。
    6. 分割转换:将已有字段,按指定分隔符,分割出新字段。
    7. 取模转换:对已有字段取模,生成新字段。
    8. 剪切字符串:通过指定起止位置,截取已有字符串类型的字段,生成新字段。
    9. EL操作转换:指定算法,对字段值进行运算,目前支持的算法有:MD5sum、sha1sum、sha256sum和sha512sum等。
    10. 字符串大小写转换:对已有的字符串类型字典,切换大小写,生成新字段。
    11. 字符串逆序转换:对已有的字符串类型字段,做逆序变换,生成新字段。
    12. 字符串空格清除转换:对已有的字符串类型字段,清除左右空格,生成新字段。
    13. 过滤行转换:配置逻辑条件过滤掉含触发条件的行。
    14. 更新域:当满足某些条件时,更新字段的值。

    客户端脚本介绍:

    Loader除了提供图形化操作界面外,还体用了一套完整的shell脚本,通过这些脚本,可实现数据源的增删查改,作业的增删查改、启动作业、停止作业,查看作业状态,判断作业是否正在运行等功能。

    脚本介绍如下:

    • lt-ctl:简称作业控制工具,用于查询作业状态、启动作业,停止作业以及判断作业是否在运行中。
    • lt-ucj:简称作业管理工具,用于查询、创建、修改和删除作业。
    • lt-ucc:简称数据源管理工具,用于查询、创建、修改和删除数据源连接信息。

    以上内容为听华为大数据培训课程和大学MOOC上厦门大学 林子雨的《大数据技术原理与应用》课程而整理的笔记。

    大数据技术原理与应用https://www.icourse163.org/course/XMU-1002335004


    展开全文
  • vue cli3配置image-webpack-loader

    万次阅读 2019-12-04 12:08:04
    vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => { config.plugins.delete('prefetch') config.plugin('...

    博客地址:http://www.globm.top/blog/1/detail/29
    vue cli3配置image-webpack-loader对图片进行压缩优化

    安装

    npm install image-webpack-loader --save-dev
    

    配置vue.config.js

    chainWebpack: config => {
        config.plugins.delete('prefetch')
        config.plugin('provide').use(webpack.ProvidePlugin, [{
          $: 'jquery',
          jquery: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
        }])
        config.module.rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({ bypassOnDebug: true })
      }
    

    重启项目打包 ok

    展开全文
  • webpack loader从入门到精通全解析

    千次阅读 2019-07-19 10:39:51
    webpack loader从入门到精通 Loader 就像是一个转换器,可以把源文件经过转化后输出新的一个结果,并且一个文件还可以链式的经过多个转换器转换。 以转换处理 SCSS 文件为例子: SCSS 源代码会先移交给 sass-...

    webpack loader从入门到精通


    Loader 就像是一个转换器,可以把源文件经过转化后输出新的一个结果,并且一个文件还可以链式的经过多个转换器转换。

    在这里插入图片描述

    以转换处理 SCSS 文件为例子:

    SCSS 源代码会先移交给 sass-loaderSCSS 转换成 CSS
    sass-loader 输出的 CSS 交给css-loader 处理,找出 CSS 中依赖的资源、压缩 CSS 等;
    css-loader 输出的 CSS 交给 style-loader 处理,转换成通过脚本加载的 JavaScript 代码;

    可以看出以上的处理过程需要有顺序的链式执行,先 sass-loadercss-loaderstyle-loader。 以上处理的 Webpack 相关配置如下:

    module.exports = {
      module: {
        rules: [
          {
            // 增加对 SCSS 文件的支持
            test: /\.scss$/,
            // SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader  
            use: [
              'style-loader',
              {
                loader:'css-loader',
                // 给 css-loader 传入配置项
                options:{
                  minimize:true, 
                }
              },
              'sass-loader'],
          },
        ]
      },
    };
    

    loader处理顺序一句话总结:从右到左,从下到上

    Loader 的作用

    由上面的例子可以看出:一个 Loader 的职责是单一的,只需要完成一种转换。 如果一个源文件需要经历多步转换才能正常使用,就通过多个 Loader 去转换。 在调用多个 Loader 去转换一个文件时,每个 Loader 会链式的顺序执行, 第一个 Loader 将会拿到需处理的原内容,上一个 Loader 处理后的结果会传给下一个接着处理,最后的 Loader 将处理后的最终结果返回给 Webpack。

    所以,在你开发一个 Loader 时,请保持其职责的单一性,你只需关心输入和输出。

    Loader 基础

    由于 Webpack 是运行在 Node.js 之上的,一个 Loader 其实就是一个 Node.js 模块,这个模块需要导出一个函数。 这个导出的函数的工作就是获得处理前的原内容,对原内容执行处理后,返回处理后的内容。

    一个最简单的 Loader 的源码如下:

    module.exports = function(source) {
      // source 为 compiler 传递给 Loader 的一个文件的原内容
      // 该函数需要返回处理后的内容,这里简单起见,直接把原内容返回了,相当于该 Loader 没有做任何转换
      return source;
    };
    

    由于 Loader 运行在 Node.js 中,你可以调用任何 Node.js 自带的 API,或者安装第三方模块进行调用:

    const sass = require('node-sass');
    module.exports = function(source) {
      return sass(source);
    };
    

    Loader 进阶

    以上只是个最简单的 Loader,Webpack 还提供一些 API 供 Loader 调用,下面我们来逐个介绍。

    获得 Loader 的 options

    在最上面处理 SCSS 文件的 Webpack 配置中,给 css-loader 传了 options 参数,以控制 css-loader。 如何在自己编写的 Loader 中获取到用户传入的 options 呢?需要这样做:

    const loaderUtils = require('loader-utils');
    module.exports = function(source) {
      // 获取到用户给当前 Loader 传入的 options
      const options = loaderUtils.getOptions(this);
      return source;
    };
    

    返回处理后的结果

    上面的 Loader 都只是返回了原内容转换后的内容,但有些场景下还需要返回除了内容之外的东西。

    例如以用 babel-loader 转换 ES6 代码为例,它还需要输出转换后的 ES5 代码对应的 Source Map,以方便调试源码。 为了把 Source Map 也一起随着 ES5 代码返回给 Webpack,可以这样写:

    module.exports = function(source) {
      // 通过 this.callback 告诉 Webpack 返回的结果
      this.callback(null, source, sourceMaps);
      // 当你使用 this.callback 返回内容时,该 Loader 必须返回 undefined,
      // 以让 Webpack 知道该 Loader 返回的结果在 this.callback 中,而不是 return 中 
      return;
    };
    

    其中的 this.callback 是 Webpack 给 Loader 注入的 API,以方便 Loader 和 Webpack 之间通信。this.callback 的详细使用方法如下:

    this.callback(
        // 当无法转换原内容时,给 Webpack 返回一个 Error
        err: Error | null,
        // 原内容转换后的内容
        content: string | Buffer,
        // 用于把转换后的内容得出原内容的 Source Map,方便调试
        sourceMap?: SourceMap,
        // 如果本次转换为原内容生成了 AST 语法树,可以把这个 AST 返回,
        // 以方便之后需要 AST 的 Loader 复用该 AST,以避免重复生成 AST,提升性能
        abstractSyntaxTree?: AST
    );
    

    Source Map 的生成很耗时,通常在开发环境下才会生成 Source Map,其它环境下不用生成,以加速构建。 为此 Webpack 为 Loader 提供了 this.sourceMap API 去告诉 Loader 当前构建环境下用户是否需要 Source Map。 如果你编写的 Loader 会生成 Source Map,请考虑到这点。

    同步与异步

    Loader 有同步和异步之分,上面介绍的 Loader 都是同步的 Loader,因为它们的转换流程都是同步的,转换完成后再返回结果。 但在有些场景下转换的步骤只能是异步完成的,例如你需要通过网络请求才能得出结果,如果采用同步的方式网络请求就会阻塞整个构建,导致构建非常缓慢。

    在这里插入图片描述

    在转换步骤是异步时,你可以这样:

    module.exports = function(source) {
        // 告诉 Webpack 本次转换是异步的,Loader 会在 callback 中回调结果
        var callback = this.async();
        someAsyncOperation(source, function(err, result, sourceMaps, ast) {
            // 通过 callback 返回异步执行后的结果
            callback(err, result, sourceMaps, ast);
        });
    };
    

    处理二进制数据

    在默认的情况下,Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串。 但有些场景下 Loader 不是处理文本文件,而是处理二进制文件,例如 file-loader,就需要 Webpack 给 Loader 传入二进制格式的数据。 为此,你需要这样编写 Loader:

    module.exports = function(source) {
        // 在 exports.raw === true 时,Webpack 传给 Loader 的 source 是 Buffer 类型的
        source instanceof Buffer === true;
        // Loader 返回的类型也可以是 Buffer 类型的
        // 在 exports.raw !== true 时,Loader 也可以返回 Buffer 类型的结果
        return source;
    };
    // 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据 
    module.exports.raw = true;
    

    以上代码中最关键的代码是最后一行 module.exports.raw = true ,没有该行 Loader 只能拿到字符串。

    缓存加速

    在有些情况下,有些转换操作需要大量计算非常耗时,如果每次构建都重新执行重复的转换操作,构建将会变得非常缓慢。 为此,Webpack 会默认缓存所有 Loader 的处理结果,也就是说在需要被处理的文件或者其依赖的文件没有发生变化时, 是不会重新调用对应的 Loader 去执行转换操作的。

    在这里插入图片描述

    如果你想让 Webpack 不缓存该 Loader 的处理结果,可以这样:

    module.exports = function(source) {
      // 关闭该 Loader 的缓存功能
      this.cacheable(false);
      return source;
    };
    

    其它 Loader API

    除了以上提到的在 Loader 中能调用的 Webpack API 外,还存在以下常用 API:

    在这里插入图片描述

    • this.context:当前处理文件的所在目录,假如当前 Loader 处理的文件是 /src/main.js,则 this.context 就等于 /src。

    • this.resource:当前处理文件的完整请求路径,包括 querystring,例如 /src/main.js?name=1。

    • this.resourcePath:当前处理文件的路径,例如 /src/main.js。

    • this.resourceQuery:当前处理文件的 querystring。

    • this.target:等于 Webpack 配置中的 Target,详情见 2-7其它配置项-Target。

    • this.loadModule:当 Loader 在处理一个文件时,如果依赖其它文件的处理结果才能得出当前文件的结果时, 就可以通过 this.loadModule(request: string, callback: function(err, source, sourceMap, module)) 去获得 request 对应文件的处理结果。

    • this.resolve:像 require 语句一样获得指定文件的完整路径,使用方法为 resolve(context: string, request: string, callback: function(err, result: string))。

    • this.addDependency:给当前处理文件添加其依赖的文件,以便再其依赖的文件发生变化时,会重新调用 Loader 处理该文件。使用方法为 addDependency(file: string)。

    • this.addContextDependency:和 addDependency 类似,但 addContextDependency 是把整个目录加入到当前正在处理文件的依赖中。使用方法为 addContextDependency(directory: string)。

    • this.clearDependencies:清除当前正在处理文件的所有依赖,使用方法为 clearDependencies()。

    • this.emitFile:输出一个文件,使用方法为 emitFile(name: string, content: Buffer|string, sourceMap: {…})

    加载本地 Loader

    在开发 Loader 的过程中,为了测试编写的 Loader 是否能正常工作,需要把它配置到 Webpack 中后,才可能会调用该 Loader。 在前面的章节中,使用的 Loader 都是通过 Npm 安装的,要使用 Loader 时会直接使用 Loader 的名称,代码如下:

    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader'],
          },
        ]
      },
    };
    

    如果还采取以上的方法去使用本地开发的 Loader 将会很麻烦,因为你需要确保编写的 Loader 的源码是在 node_modules 目录下。 为此你需要先把编写的 Loader 发布到 Npm 仓库后再安装到本地项目使用。

    使用 npm link

    Npm link 专门用于开发和调试本地 Npm 模块,能做到在不发布模块的情况下,把本地的一个正在开发的模块的源码链接到项目的 node_modules目录下,让项目可以直接使用本地的 Npm 模块。 由于是通过软链接的方式实现的,编辑了本地的 Npm 模块代码,在项目中也能使用到编辑后的代码。

    完成 Npm link 的步骤如下:

    • 确保正在开发的本地 Npm 模块(也就是正在开发的 Loader)的 package.json 已经正确配置好;
    • 在本地 Npm 模块根目录下执行 npm link,把本地模块注册到全局;
    • 在项目根目录下执行 npm link loader-name,把第2步注册到全局的本地 Npm 模块链接到项目的 node_moduels 下,其中的 loader-name 是指在第1步中的 package.json 文件中配置的模块名称。

    链接好 Loader 到项目后你就可以像使用一个真正的 Npm 模块一样使用本地的 Loader 了。

    ResolveLoader

    在 2-7 其它配置项 中曾介绍过 ResolveLoader 用于配置 Webpack 如何寻找 Loader。 默认情况下只会去 node_modules 目录下寻找,为了让 Webpack 加载放在本地项目中的 Loader 需要修改 resolveLoader.modules

    假如本地的 Loader 在项目目录中的 ./loaders/loader-name 中,则需要如下配置:

    module.exports = {
      resolveLoader:{
        // 去哪些目录下寻找 Loader,有先后顺序之分
        modules: ['node_modules','./loaders/'],
      }
    }
    

    加上以上配置后, Webpack 会先去 node_modules 项目下寻找 Loader,如果找不到,会再去 ./loaders/ 目录下寻找。

    实战

    上面讲了许多理论,接下来从实际出发,来编写一个解决实际问题的 Loader。
    在这里插入图片描述

    该 Loader 名叫 comment-require-loader,作用是把 JavaScript 代码中的注释语法

    // @require '../style/index.css'
    

    转换成

    require('../style/index.css');
    

    该 Loader 的使用场景是去正确加载针对 Fis3 编写的 JavaScript,这些 JavaScript 中存在通过注释的方式加载依赖的 CSS 文件。

    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            use: ['comment-require-loader'],
            // 针对采用了 fis3 CSS 导入语法的 JavaScript 文件通过 comment-require-loader 去转换 
            include: [path.resolve(__dirname, 'node_modules/imui')]
          }
        ]
      }
    };
    

    该 Loader 的实现非常简单,完整代码如下:

    function replace(source) {
        // 使用正则把 // @require '../style/index.css' 转换成 require('../style/index.css');  
        return source.replace(/(\/\/ *@require) +(('|").+('|")).*/, 'require($2);');
    }
    
    module.exports = function (content) {
        return replace(content);
    };
    

    仓库代码

    https://github.com/gwuhaolin/comment-require-loader

    展开全文
  • loader配置 loader是导出为一个函数的node模块。该函数在loader转换资源的时候调用。给定的函数将调用loader API,并通过this上下文访问。 匹配(test)单个 loader 匹配(test)单个 loader,你可以简单通过在 rule ...

    loader

    loader配置

    loader是导出为一个函数的node模块。该函数在loader转换资源的时候调用。给定的函数将调用loader API,并通过this上下文访问。

    匹配(test)单个 loader

    匹配(test)单个 loader,你可以简单通过在 rule 对象设置 path.resolve 指向这个本地文件

    {
      test: /\.js$/
      use: [
        {
          loader: path.resolve('path/to/loader.js'),
          options: {/* ... */}
        }
      ]
    }
    

    匹配(test)多个 loaders

    你可以使用 resolveLoader.modules 配置,webpack 将会从这些目录中搜索这些 loaders。

    resolveLoader: {
       modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
    },
    

    npm link

    • 确保正在开发的本地 Npm 模块(也就是正在开发的 Loader)的 package.json 已经正确配置好; 在本地 Npm 模块根目录下执行 npm link,把本地模块注册到全局;

    • 在项目根目录下执行 npm link loader-name,把第2步注册到全局的本地 Npm 模块链接到项目的 node_moduels 下,其中的 - loader-name 是指在第1步中的 package.json 文件中配置的模块名称。

      npm link
      

    alias

    resolveLoader: {
            alias: {
                "babel-loader": resolve('./loaders/babel-loader.js'),
                "css-loader": resolve('./loaders/css-loader.js'),
                "style-loader": resolve('./loaders/style-loader.js'),
                "file-loader": resolve('./loaders/file-loader.js'),
                "url-loader": resolve('./loaders/url-loader.js')
            }
        },
    

    loader用法

    单个loader用法

    • 当一个 loader 在资源中使用,这个 loader 只能传入一个参数 - 这个参数是一个包含包含资源文件内容的字符串
    • 同步 loader 可以简单的返回一个代表模块转化后的值。
    • 在更复杂的情况下,loader 也可以通过使用 this.callback(err, values…) 函数,返回任意数量的值。错误要么传递给这个 this.callback 函数,要么扔进同步 loader 中。
    • loader只能传入一个包含包含资源文件内容的字符串
    • 同步 loader 可以简单的返回一个代表模块转化后的值
    • loader 也可以通过使用 this.callback(err, values…) 函数,返回任意数量的值
    • loader 会返回一个或者两个值。第一个值的类型是 JavaScript 代码的字符串或者 buffer。第二个参数值是 SourceMap,它是个 JavaScript 对象

    多个loader

    当链式调用多个 loader 的时候,请记住它们会以相反的顺序执行。取决于数组写法格式,从右向左或者从下向上执行。

    • 最后的 loader 最早调用,将会传入原始资源内容。
    • 第一个 loader 最后调用,期望值是传出 JavaScript 和 source map(可选)。
    • 中间的 loader 执行时,会传入前一个 loader 传出的结果。

    单个loader用法

    • 最后的 loader 最早调用,将会传入原始资源内容。
    • 第一个 loader 最后调用,期望值是传出 JavaScript 和 source map(可选)。
    • 中间的 loader 执行时,会传入前一个 loader 传出的结果。

    用法准则

    • 简单

    loaders 应该只做单一任务。这不仅使每个 loader 易维护,也可以在更多场景链式调用。

    • 链式(Chaining)

    利用 loader 可以链式调用的优势。写五个简单的 loader 实现五项任务,而不是一个 loader 实现五项任务

    • 模块化(Modular)

    保证输出模块化。loader 生成的模块与普通模块遵循相同的设计原则。

    • 无状态(Stateless)

    确保 loader 在不同模块转换之间不保存状态。每次运行都应该独立于其他编译模块以及相同模块之前的编译结果。

    loader 工具库(Loader Utilities)

    • loader-utils 包。它提供了许多有用的工具,但最常用的一种工具是获取传递给 loader 的选项

    • schema-utils 包配合 loader-utils,用于保证 loader 选项,进行与 JSON Schema 结构一致的校验

    • loader 依赖(Loader Dependencies)

    如果一个 loader 使用外部资源(例如,从文件系统读取),必须声明它。这些信息用于使缓存 loaders 无效,以及在观察模式(watch mode)下重编译。

    • 模块依赖(Module Dependencies)

    根据模块类型,可能会有不同的模式指定依赖关系。例如在 CSS 中,使用 @import 和 url(…) 语句来声明依赖。这些依赖关系应该由模块系统解析。

    绝对路径(Absolute Paths)

    不要在模块代码中插入绝对路径,因为当项目根路径变化时,文件绝对路径也会变化。loader-utils 中的 stringifyRequest 方法,可以将绝对路径转化为相对路径。

    同等依赖(Peer Dependencies)

    • 如果你的 loader 简单包裹另外一个包,你应该把这个包作为一个 peerDependency 引入。
    • 这种方式允许应用程序开发者在必要情况下,在 package.json 中指定所需的确定版本。

    API

    缓存结果

    webpack充分地利用缓存来提高编译效率

     this.cacheable();
    

    异步

    当一个 Loader 无依赖,可异步的时候我想都应该让它不再阻塞地去异步

    // 让 Loader 缓存
    module.exports = function(source) {
        var callback = this.async();
        // 做异步的事
        doSomeAsyncOperation(content, function(err, result) {
            if(err) return callback(err);
            callback(null, result);
        });
    };
    

    raw loader

    默认的情况源文件是以 UTF-8 字符串的形式传入给 Loader,设置module.exports.raw = true可使用 buffer 的形式进行处理

    module.exports.raw = true;
    

    获得 Loader 的 options

    const loaderUtils = require('loader-utils');
    module.exports = function(source) {
      // 获取到用户给当前 Loader 传入的 options
      const options = loaderUtils.getOptions(this);
      return source;
    };
    

    返回其它结果

    Loader有些场景下还需要返回除了内容之外的东西。

    module.exports = function(source) {
      // 通过 this.callback 告诉 Webpack 返回的结果
      this.callback(null, source, sourceMaps);
      // 当你使用 this.callback 返回内容时,该 Loader 必须返回 undefined,
      // 以让 Webpack 知道该 Loader 返回的结果在 this.callback 中,而不是 return 中 
      return;
    };
    

    完整格式

    this.callback(
        // 当无法转换原内容时,给 Webpack 返回一个 Error
        err: Error | null,
        // 原内容转换后的内容
        content: string | Buffer,
        // 用于把转换后的内容得出原内容的 Source Map,方便调试
        sourceMap?: SourceMap,
        // 如果本次转换为原内容生成了 AST 语法树,可以把这个 AST 返回,
        // 以方便之后需要 AST 的 Loader 复用该 AST,以避免重复生成 AST,提升性能
        abstractSyntaxTree?: AST
    );
    

    同步与异步

    Loader 有同步和异步之分,上面介绍的 Loader 都是同步的 Loader,因为它们的转换流程都是同步的,转换完成后再返回结果。 但在有些场景下转换的步骤只能是异步完成的,例如你需要通过网络请求才能得出结果,如果采用同步的方式网络请求就会阻塞整个构建,导致构建非常缓慢。

    module.exports = function(source) {
        // 告诉 Webpack 本次转换是异步的,Loader 会在 callback 中回调结果
        var callback = this.async();
        someAsyncOperation(source, function(err, result, sourceMaps, ast) {
            // 通过 callback 返回异步执行后的结果
            callback(err, result, sourceMaps, ast);
        });
    };
    

    处理二进制数据

    在默认的情况下,Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串。 但有些场景下 Loader 不是处理文本文件,而是处理二进制文件,例如 file-loader,就需要 Webpack 给 Loader 传入二进制格式的数据。 为此,你需要这样编写 Loader:

    module.exports = function(source) {
        // 在 exports.raw === true 时,Webpack 传给 Loader 的 source 是 Buffer 类型的
        source instanceof Buffer === true;
        // Loader 返回的类型也可以是 Buffer 类型的
        // 在 exports.raw !== true 时,Loader 也可以返回 Buffer 类型的结果
        return source;
    };
    // 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据 
    module.exports.raw = true;
    

    缓存

    在有些情况下,有些转换操作需要大量计算非常耗时,如果每次构建都重新执行重复的转换操作,构建将会变得非常缓慢。 为此,Webpack 会默认缓存所有 Loader 的处理结果,也就是说在需要被处理的文件或者其依赖的文件没有发生变化时, 是不会重新调用对应的 Loader 去执行转换操作的。

    module.exports = function(source) {
      // 关闭该 Loader 的缓存功能
      this.cacheable(false);
      return source;
    };
    

    其它 Loader API

    方法名 含义
    this.context 当前处理文件的所在目录,假如当前 Loader 处理的文件是 /src/main.js,则 this.context 就等于 /src
    this.resource 当前处理文件的完整请求路径,包括 querystring,例如 /src/main.js?name=1。
    this.resourcePath 当前处理文件的路径,例如 /src/main.js
    this.resourceQuery 当前处理文件的 querystring
    this.target 等于 Webpack 配置中的 Target
    this.loadModule 但 Loader 在处理一个文件时,如果依赖其它文件的处理结果才能得出当前文件的结果时,就可以通过 this.loadModule(request: string, callback: function(err, source, sourceMap, module)) 去获得 request 对应文件的处理结果
    this.resolve 像 require 语句一样获得指定文件的完整路径,使用方法为 resolve(context: string, request: string, callback: function(err, result: string))
    this.addDependency 给当前处理文件添加其依赖的文件,以便再其依赖的文件发生变化时,会重新调用 Loader 处理该文件。使用方法为 addDependency(file: string)
    this.addContextDependency 和 addDependency 类似,但 addContextDependency 是把整个目录加入到当前正在处理文件的依赖中。使用方法为 addContextDependency(directory: string)
    this.clearDependencies 清除当前正在处理文件的所有依赖,使用方法为 clearDependencies()
    this.emitFile 输出一个文件,使用方法为 emitFile(name: string, content: Buffer/string, sourceMap: {…})
    loader-utils.stringifyRequest Turns a request into a string that can be used inside require() or import while avoiding absolute paths. Use it instead of JSON.stringify(…) if you’re generating code inside a loader 把一个请求字符串转成一个字符串,以便能在require或者import中使用以避免绝对路径。如果你在一个loder中生成代码的话请使用这个而不要用JSON.stringify()
    loader-utils.interpolateName Interpolates a filename template using multiple placeholders and/or a regular expression. The template and regular expression are set as query params called name and regExp on the current loader’s context. 使用多个占位符或一个正则表达式转换一个文件名的模块。这个模板和正则表达式被设置为查询参数,在当前loader的上下文中被称为name或者regExp
    展开全文
  • 很多人没写过 loader,但是都对 loader 的具体怎么写,怎样执行的一无所知。那么本文就对 3.0.0 版本做一个全方位的揭秘。 loader 所谓 loader 只是一个导出为函数的 JavaScript 模块。它接收上一个 loader 产生的...
  • 参考: Webpack Book --- Extending with Loaders。 Webpack Doc --- Loader Interface Loader 是 Webpack 几大重要的...由于 Webpack 社区的繁荣,使得大部分的业务场景所使用的资源都有对用的 loader,可以参考...
  • 常用 loader 集锦

    2020-01-03 19:55:35
    做项目的时候不知道加载文件需要那个 loader , 在网上找了很长时间,这个相对全一点,记录下来。 1.模板: (1)html-loader:将HTML文件导出编译为字符串,可供js识别的其中一个模块 (2)pug-loader : 加载pug模板 (3)...
  • 这篇主要会讲当一个 module 被创建之后,使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程: 在 module 一开始构建的过程中,首先会创建一个 loaderContext 对象,它和这个 module ...
  • Loader介绍及操作实例

    万次阅读 2018-08-18 16:08:57
    Loader简介 FusionInsight HD Loader能实现FusionInsight HD与外部数据源如关系型数据库、SFTP服务器、FTP服务器之间交换数据和文件。支持将数据或文件从关系型数据库或文件系统导入到FusionInsight HD系统中。 ...
  • SQL*Loader的使用总结(一)

    万次阅读 2016-01-27 09:33:38
    SQL*Loader是oracle提供的可以从多种平面文件中向数据库中加载数据的工具,使用SQLLDR工具可以在很短的时间内向数据库中加载大量的数据,像把制作好的excel表格导入数据库,可以说非常方便,相关的数据加载和卸载...
  • 本文简书同步发布,谢谢关注。 ...Android开发者都经历过APP UI开发不当 会造成overDraw,导致APP UI渲染过慢,但是很多人却没听过overLoad,overLoad一般是由于开发者在主线程操作耗时操作,导致程序变慢 甚至出现的...
  • loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那webpack中的loader就是帮助预处理下模块中...
  • 如何使用scrapy中的ItemLoader提取数据?

    万次阅读 多人点赞 2018-03-12 18:32:28
    如何使用scrapy中的ItemLoader提取数据? 1. 简述 我们在用scrapy爬取数据时,首先就要明确我们要爬取什么数据。scrapy提供了Item对象这种简单的容器,我们可以通过Item定义提取数据的格式,需要爬取哪些字段,...
  • Android Loader机制全面详解及源码浅析

    千次阅读 2016-09-14 12:26:04
    原文出处:...同样的,在ContentProvider中也可能存在耗时操作,这时也该使用异步操作,而3.0之后最推荐的异步操作就是Loader。它可以方便我们在Activity和Fragment中异步
  • 1.Loader特性: (1).对于每个Activity或者Fragment都可用 (2).提供异步加载数据 (3).监视数据资源,当内容改变时重新更新 (4).当配置改变时,自动重新连接最新的cursor,故不需要重新查询数据 2.Loader相关类接口 ...
  • CSS-LOADER配置详解前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。1、概述对于一般的css文件,我们需要动用三个loader(是不是觉得...
  • webpack(7)_CSS_使用style-loader和css-loader

    千次阅读 2018-07-30 13:17:58
    style-loader 安装style-loader npm install style-loader --save-dev 安装css-loader npm install css-loader --save-dev
  • EasyUI datagrid插件 loader属性 使用详解

    千次阅读 2019-05-08 14:51:45
    loader 定义如何从远程服务器加载数据,如果返回false则取消动作。 loader属性指向一个函数表达式:function(param, succcess(data), error) {...}。 另:loadFilter属性用于过滤返回的分页数据的格式(必须包含total...
  • loader1、loader的配置和执行顺序

    千次阅读 2019-02-14 08:26:22
    loader的配置 配置单个loader请见上一个文件 配置多个loader 数组形式 let path = require('path'); module.exports = { mode:'development', entry:'./src/index.js', output:{ filename:'bundle.js', ...
  • 什么是Boot Loader

    千次阅读 2015-10-10 11:17:27
    原创作品,允许转载,转载时请务必...在嵌入式系统当中你可能经常听到 boot loader(引导加载器)这一词,boot loader是指什么呢?在我们日常经常接触的东西中是不是有与boot loader的作用或是概念相似的呢?有一点我一

空空如也

1 2 3 4 5 ... 20
收藏数 298,321
精华内容 119,328
关键字:

loader