loader

1|0Loader

在 webpack 的思想中,一切资源皆模块.webpack 本身默认可加载 js 和 json ,在 web 工程中的静态文件还有 HTML, js, css ,字体,图片等资源.loader 赋予了 js 引用这些资源的能力.

import './index.css';

该语句实际是说明 js 与 css 之间存在依赖关系,实际打包输出结果还是将 css 作为单独的资源,以 html 的标签形式引入.
在没有相关的 loader 的配置情况下将出现语法错误.
loader 是属于 webpack 工程的一环, loader 中对预编译语言的处理依旧需要安装相应的转换器,如: scss-loader 需要安装 node-sass ,babel-loader 需要安装 babel/core

1|1loader 的配置

基本配置

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

在配置文件的 rules以数组单元形式配置,
test 为模块的正则表达式匹配
use 数组形式配置 loader,loader 加载顺序由后往前,
option部分与loader自身有关

exclude 与 include
```
```js
rules:[
  {
    test:/\.js$/
    use:['babel-loader'],
    exclude:/node_modules/,
    include:/src/
  }
]
```
```
include 即为指定包含的资源
exclude 即为不包含的资源, 优先级高 , 当 include 与 exclude 有交叉时, exclude 生效。

resource 与 issuer

在 webpack 中 resource 为被加载的资源模块,issuer 为加载者

rules:[
  {
    test:/\.css$/,
    use:['style-loader','css-loader'],
    resource:{
      test:/\.js$/.
      include:/src/
    },
    issuer:{
      test:/\.css$/,
    }
  }
]

增加两者的配置使得配置更加细化

enforce
在 webpack 的 loader 按照执行顺序分类四类:
- pre 最先执行
- normal 没有特殊配置的普通 loader
- inline 打包单文件的 loader, 与配置文件中对一类文件处理的形式不同,与现已不推荐
```
//inline loader
import data from 'raw-loader!../utils.js';
```
- post 最后执行
enforce 只接收 pre 和 post
```
//eslint-loader 为语法检查,必须在其余loader将其代码转换之前执行
rules:[
  {
    test:/\.js$/,
    use:['eslint-loader'],
    enforce:'pre'
  }
]
```
PS: 以上loader的加载顺序为webpack的normal阶段,而Patching阶段的顺序为:post，inline，normal，pre
noParse
忽略某些不需要接续处理的模块文件,提高构建效率
```
noParse:/jquery|charts/
```

paser
对模块化规范进行细化配置

rules:[
  { 
    test:/\.js$/,
    parser:[
      amd:false,          //禁用amd
      commonjs:false,     //禁用commonjs
      requireJs:false,    //禁用requireJs
      ...
    ]
  }
]

1|2常见loader

babel-loader 转化es6 代码到指定版本
ts-loader Typescript语言转换
html-loader 将HTML文件转化为字符串
handlebars-loader 处理handlebars模板
file-loader 图片等文件资源打包
url-loader 与file-loader功能类似,增加了limit配置,根据模块文件大小选择打包文件或者base64编码
style-loader
css-loader
scss-loader

vue-loader

1|3file-loader

url-loader

css 相关

style-loader 将 css 挂在页面中
css-loader 关联 css 文件引用关系.生成完整的生成完整的 css 文件

预处理器 sass-loader 解析预编译文件语法
postcss-loader 做 css 的前缀及兼容优化

1|4手写 loader

loader 的本质是一个函数,将模块内容输入,解析处理后再导出,多个 loader 形成一个链式.

use:['style-loader','css-loader','scss-loader']
=>  style-loader(css-loader(cscs-loader( scss)))

一下是 loader 的源码结构

module.exports = function loader(content,map,meta) {
  var callback = this.async()
  var result = handler(content,map,meta)
  callback({
    null,             //error
    result.content,   //转换后内容
    result.map,       //转换后 souce-map
    result.meta       //转换后 ast
  })

}

__EOF__

本文作者：Odyssey
本文链接：https://www.cnblogs.com/qingzhao/p/16521328.html
关于博主：I am a good person
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！