loader

2022-07-26 16:03:02 阅读：134 来源： 互联网

Loader

在 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

loader 的配置

基本配置

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
      ...
    ]
  }
]

常见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

file-loader

url-loader

css 相关

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

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

手写 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
  })

}

标签：style,rules,js,test,loader,css
来源： https://www.cnblogs.com/qingzhao/p/16521328.html