webpack loader

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

www.webpackjs.com/api/loaders…

loader的特性

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。 *

使用loader

在你的应用程序中，有三种使用 loader 的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。

loader的执行顺序

1、loader的执行顺序默认是从下到上 从右往左执行 2、loader可以添加enforce字段 可能的值有："pre" | "post" 指定 loader 种类。没有值表示是普通 loader。

还有一个额外的种类"行内 loader"，loader 被应用在 import/require 行内。

所有 loader 通过 前置,普通， 行内, , 后置 排序，并按此顺序使用。

所有普通 loader 可以通过在请求中加上 ! 前缀来忽略（覆盖）。

所有普通和前置 loader 可以通过在请求中加上 -! 前缀来忽略（覆盖）。

所有普通，后置和前置 loader 可以通过在请求中加上 !! 前缀来忽略（覆盖）。

不应该使用行内 loader 和 ! 前缀，因为它们是非标准的。它们可在由 loader 生成的代码中使用。

loader由两部分组成 一部分是picth 一部分是normal

例子： style-loader 与css-loader

babel-loader

转换javascript代码，将ES6或者更高版本的js代码转换成ES5代码

bebel的原理

总结来说babel-loader就是'Javascript' In 'Javascript' Out, 期间会运用其他工具预设、插件，例如babel-preset-env 最后阶段还是要把 AST 转换回字符串形式的Javascript，同时这个阶段还会生成Source Map

预设和插件

预设和一组插件的集合，babel会应用插件转换，然后再应用预设转换。 插件的执行顺序: 执行顺序从前往后 预设的执行顺序：执行顺序从后往前

一个在线的AST解析网站：astexplorer.net/

AST就是一棵'对象树'，用来表示代码的语法结构.

 class TestBabel{    
    constructor() {        
        this.name = 'xxx'    
    }   
    sayHello() {        
        console.log(`hello i am ${this.name}`)    
    }
 }
 
//转换成function 
 TestBabel() {    
     this.name = 'xxx'}
     TestBabel.prototype.sayHello = function() {    
         console.log(`hello i am ${this.name}`)
}