webpack的pitching loader详解

webpack中关于pitching loader的文档比较不清楚：

The loaders are called from right to left. But in some cases loaders do not care about the results of the previous loader or the resource. They only care for metadata. The pitch method on the loaders is called from left to right before the loaders are called. If a loader delivers a result in the pitch method the process turns around and skips the remaining loaders, continuing with the calls to the more left loaders. data can be passed between pitch and normal call.

比如a!b!c!module, 正常调用顺序应该是c、b、a，但是真正调用顺序是
a(pitch)、b(pitch)、c(pitch)、c、b、a， 如果其中任何一个pitching loader返回了值就相当于在它以及它右边的loader已经执行完毕。

比如如果b返回了字符串"result b", 接下来只有a会被系统执行，且a的loader收到的参数是result b。

也就是说pitching loader的初衷是为了提升效率，少执行几个loader。

然而这样的机会并不多。更为常用的是它的另一个用途。

根据官方文档：

In the complex case, when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.

loader根据返回值可以分为两种，一种是返回js代码（一个module的代码，含有类似module.export语句）的loader，还有不能作为最左边loader的其他loader

问题是有时候我们想把两个第一种loader chain起来，比如style-loader!css-loader!

问题是css-loader的返回值是一串js代码，如果按正常方式写style-loader的参数就是一串代码字符串。就算eval了也不一定拿到什么值

eval('module.export="result";console.log("hello world")') === "hello world"

为了解决这种问题，我们需要在style-loader里执行require(css-loader!resouce), 这会把css-loader跑一遍，也就是说如果按正常顺序执行css-loader会跑两遍（第一遍拿到的js代码用不了）, 为了只执行一次，style-loader利用了pitching, 在pitching函数里require(css-loader!resouce)。然后返回js代码（style-loader能够作为最左边loader）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Webpack中css-loader和less-loader的使用教程

    Webpack中css-loader和less-loader的使用教程

    前言 在Webpack中,通过css-loader,可以实现在js文件中通过require的方式,来引入css.下面来看看详细的介绍吧. 一.css-loader 我们需要在js文件里,通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader, style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css). npm install css-loader,style-loader --save-dev 然后在main

  • Webpack 之 babel-loader文件预处理器详解

    loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader 来加载各种文件,比如: html文件需要使用html-loader ,css 需要使用css-loader . style-loader 等等. 今天我们来认识的是 babel-loader,用来处理ES6语法,将其编译为浏览器可以执行的js语法. 安装 我们需要用到 babel-loader babel-core babel-preset 配合版本: webpack 3.x | babe

  • webpack-url-loader 解决项目中图片打包路径问题

    webpack-url-loader 解决项目中图片打包路径问题

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里. 下面我们就来分析下在webpack项目中图片的应用场景. 1.CSS文件中的背景图等设置 项目目录图: 以下以我项目中的test.css为例 .test{ color: red; width: 150px; height: 100px; overflow: hidden; background: url("../img/box@2x.png") no-repe

  • 详解webpack loader和plugin编写

    1 基础回顾 首先我们先回顾一下webpack常见配置,因为后面会用到,所以简单介绍一下. 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' //确保文件资源能够在 http://localhost:3000 下正确访问

  • webpack使用 babel-loader 转换 ES6代码示例

    webpack使用 babel-loader 转换 ES6代码示例

    本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat

  • 详解webpack进阶之loader篇

    webpack的loaders是一大特色,也是很重要的一部分.这遍博客我将分类讲解一些常用的laoder 一.loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理 npm install --save -dev css-loader style-loader sass-loader less-loade

  • 详解webpack自定义loader初探

    最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘. webpack想必前端圈的人都知道了,大多数人也都或多或少的用过.简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译.压缩等,最终一起打包到指定的文件中.可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用. 那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理.比如把less.sass文

  • webpack3之loader全解析

    首先亮出webpack官方网站,webpack能干什么?官网给出的答案就是,一句话,让一切变得简单! 各式各样的loader层出不穷,让我们在构建时不知所措,于此,总结下loader的全解析. 概念 loader,顾名思义,加载器,英文的解释如下: Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you impor

  • 详解Webpack loader 之 file-loader

    简介 安装 npm install --save-dev file-loader 用法 默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名. import img from './webpack-logo.png' webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', option

  • webpack的pitching loader详解

    webpack中关于pitching loader的文档比较不清楚: The loaders are called from right to left. But in some cases loaders do not care about the results of the previous loader or the resource. They only care for metadata. The pitch method on the loaders is called from

  • 基于webpack.config.js 参数详解

    webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.

  • 脚手架vue-cli工程webpack的基本用法详解

    webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfile说再见了. 一个完整的工程项目中的webpack的配置远远没有这么简单,随着工程的构建要求的增加,webpack.config.js内的配置项目也会随之增加,webpack还有许许多多的选项提供给我们进行灵活配置,它只是一个构建工具,我们只需要了解在Vue项目中它基本能为我们做到的工作.最小化的配

  • Webpack中publicPath使用详解

    Webpack中publicPath使用详解

    目录 output output.path output.publicPath webpack-dev-server中的publicPath html-webpack-plugin template filename 最后 斜杠/的含义 参考 最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output outp

  • webpack引入eslint配置详解

    webpack中eslint使用 首先,要使webpack支持eslint,就要要安装 eslint-loader ,命令如下: npm install --save-dev eslint-loader 在 webpack.config.js 中添加如下代码: { test: /\.js$/, loader: 'eslint-loader', enforce: "pre", include: [path.resolve(__dirname, 'src')], // 指定检查的目录 op

  • Webpack执行命令参数详解

    Webpack执行命令参数详解

    一.概述 前面的章节我们讲解了webpack的安装.webpack.config.js的 基本配置.webpack执行命名以及require方法的使用,不 知道大家有没有发现,当我们每次修改或者新增一个js文件的时候,就会重新执行一下webpack 命令进行编译,这种方式非常的麻烦,这样整个项目下来岂不是要执行百万次.接下来我们会讲解webpack相关的参数,避免这个情况. 二.参数详解 在webpack执行命令之后可以添加一些参数,这些参数都有自己的作用,下面是参数列表: $ webpack

  • 详解React开发必不可少的eslint配置

    Eslint介绍 Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能. 安装eslint $ npm install eslint -g 项目需要安装的插件 "babel-eslint": "^8.0.3", "eslint": "^4.13.1", "eslint-plugin-react": "^7.5.1", 配置详情 下

  • 详解从vue-loader源码分析CSS Scoped的实现

    虽然写了很长一段时间的Vue了,对于CSS Scoped的原理也大致了解,但一直未曾关注过其实现细节.最近在重新学习webpack,因此查看了vue-loader源码,顺便从vue-loader的源码中整理CSS Scoped的实现. 本文展示了vue-loader中的一些源码片段,为了便于理解,稍作删减.参考 Vue CSS SCOPED实现原理 Vue loader官方文档 相关概念 CSS Scoped的实现原理 在Vue单文件组件中,我们只需要在style标签上加上scoped属性,就可

  • 详解Js模块化的作用原理和方案

    详解Js模块化的作用原理和方案

    一.模块化概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起:块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 二.模块化作用 为什么要用模块化的JavaScript? 因为在实际的开发过程中,经常会遇到变量.函数.对象等名字的冲突,这样就容易造成冲突,还会造成全局变量被污染: 同时,程序复杂时需要写很多代码,而且还要引入很多类库,这样稍微不注意就容易造成文件依赖混乱: 为了解决上面的的问题,我们才开始使用模块化的js,所以说模块

  • Vue import from省略后缀/加载文件夹的方法/实例详解

    目录 简介 省略后缀 说明 官网网址 详解 文件名相同的处理流程 加载文件夹 简介 说明 详解 实例 1. 路由配置中导入layout文件夹 2.layout/index.vue引入目录 3.components/index.js引入各个组件 简介 本文介绍Vue在import时省略后缀以及import文件夹的方法. 省略后缀 说明 可以配置省略后缀,比如:test.js,只用test即可. 官网网址 解析(Resolve) | webpack 中文文档 详解 配置文件:webpack.base

随机推荐