其他分享
首页 > 其他分享> > loader

loader

作者:互联网

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 的配置

  1. 基本配置

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

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

  1. exclude 与 include

    ```js
    rules:[
      {
        test:/\.js$/
        use:['babel-loader'],
        exclude:/node_modules/,
        include:/src/
      }
    ]
    ```
    

    include 即为指定包含的资源
    exclude 即为不包含的资源, 优先级高 , 当 include 与 exclude 有交叉时, exclude 生效。

  2. resource 与 issuer

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

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

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

  3. 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

  4. noParse
    忽略某些不需要接续处理的模块文件,提高构建效率

    noParse:/jquery|charts/
    
  5. paser
    对模块化规范进行细化配置

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

常见loader

  1. babel-loader 转化es6 代码到指定版本
  2. 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