webpack5原理loader概述

Posted 天界程序员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack5原理loader概述相关的知识,希望对你有一定的参考价值。

简介

loader其实是一个函数,用来帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

loader的分类以及执行顺序

1、分类

  • pre:前置loader
  • normal:普通loader
  • inline:内联loader
  • post:后置loader

2、执行顺序

  • 各个种类的loader的执行优先级:pre > normal > inline > post
  • 相同种类优先级的loader执行优先级:从右到左,从下到上

示例1:标明loader种类时的执行顺序

// 此时loader执行顺序:loader1 - loader2 - loader3
module: 
  rules: [
    
      enforce: "pre",
      test: /\\.js$/,
      loader: "loader1",
    ,
    
      // 没有enforce就是normal
      test: /\\.js$/,
      loader: "loader2",
    ,
    
      enforce: "post",
      test: /\\.js$/,
      loader: "loader3",
    ,
  ],
,

示例2:loader在同一种类时的执行顺序(此时都是normal)

// 此时loader执行顺序:loader3 - loader2 - loader1
module: 
  rules: [
    
      test: /\\.js$/,
      loader: "loader1",
    ,
    
      test: /\\.js$/,
      loader: "loader2",
    ,
    
      test: /\\.js$/,
      loader: "loader3",
    ,
  ],
,

3、使用loader的方式

  • 配置方式:在webpack.config.js 文件中指定loader,显示的配置loader种类以及顺序【pre、normal、post】。
  • 内联方式:在每个import语句中显示指定loader名称,通过特殊符号指定执行顺序【inline】。

4、内联loader(inline-loader)

用法示例:import Styles from 'style-loader!css-loader?modules!./styles.css';

代表的含义:

  • 使用 css-loaderstyle-loader 处理 styles.css 文件

  • 通过 ! 将资源中的 loader 分开

inline loader 可以通过添加不同前缀,跳过其他类型 loader

1、! 跳过 normal loader

import Styles from '!style-loader!css-loader?modules!./styles.css';

2、-! 跳过 pre loadernormal loader

import Styles from '-!style-loader!css-loader?modules!./styles.css';

3、!! 跳过 pre loader、 normal loaderpost loader

import Styles from '!!style-loader!css-loader?modules!./styles.css';

以上是关于webpack5原理loader概述的主要内容,如果未能解决你的问题,请参考以下文章

webpack5处理图片资源

webpack5不要再用url-loader了

webpack5不要再用url-loader了

webpack5项目搭建React-Cli(配置优化)

webpack5项目搭建Vue-Cli(生产环境)

使用Webpack5打包各类资源