webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?

这篇具有很好参考价值的文章主要介绍了webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?,webpack,rust,前端
一、是什么

loader 用于对模块的"源代码"进行转换,在 import 或"加载"模块时预处理文件

webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。如下图所示:

webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?,webpack,rust,前端
在webpack内部中,任何文件都是模块,不仅仅只是js文件

默认情况下,在遇到import或者require加载模块的时候,webpack只支持对js 和 json 文件打包

像css、sass、png等这些类型的文件的时候,webpack则无能为力,这时候就需要配置对应的loader进行文件内容的解析

在加载模块的时候,执行顺序如下:

webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?,webpack,rust,前端
当 webpack 碰到不识别的模块的时候,webpack 会在配置的中查找该文件解析规则

关于配置loader的方式有三种:

  • 配置方式(推荐):在 webpack.config.js文件中指定 loader
  • 内联方式:在每个 import 语句中显式指定 loader
  • CLI 方式:在 shell 命令中指定它们

配置方式

关于loader的配置,我们是写在module.rules属性中,属性介绍如下:

  • rules是一个数组的形式,因此我们可以配置很多个loader
  • 每一个loader对应一个对象的形式,对象属性test 为匹配的规则,一般情况为正则表达式
  • 属性use针对匹配到文件类型,调用对应的 loader 进行处理

代码编写,如下形式:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

二、特性

这里继续拿上述代码,来讲讲loader的特性

从上述代码可以看到,在处理css模块的时候,use属性中配置了三个loader分别处理css文件

因为loader支持链式调用,链中的每个loader会处理之前已处理过的资源,最终变为js代码。顺序为相反的顺序执行,即上述执行方式为sass-loader、css-loader、style-loader

除此之外,loader的特性还有如下:

  • loader 可以是同步的,也可以是异步的
  • loader 运行在 Node.js 中,并且能够执行任何操作
  • 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader,还可以在 module.rules 中使用 loader 字段直接引用一个模块
  • 插件(plugin)可以为 loader 带来更多特性
  • loader 能够产生额外的任意文件

可以通过 loader 的预处理函数,为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑,例如:压缩、打包、语言翻译和更多其他特性

三、常见的loader

在页面开发过程中,我们经常性加载除了js文件以外的内容,这时候我们就需要配置响应的loader进行加载

常见的loader如下:

  • style-loader: 将css添加到DOM的内联样式标签style里
  • css-loader :允许将css文件通过require的方式引入,并返回css代码
  • less-loader: 处理less
  • sass-loader: 处理sass
  • postcss-loader: 用postcss来处理CSS
  • autoprefixer-loader: 处理CSS3属性前缀,已被弃用,建议直接使用postcss
  • file-loader: 分发文件到output目录并返回相对路径
  • url-loader: 和file-loader类似,但是当文件小于设定的limit时可以返回一个Data Url
  • html-minify-loader: 压缩HTML
  • babel-loader :用babel来转换ES6文件到ES

下面给出一些常见的loader的使用:

css-loader

分析 css 模块之间的关系,并合成⼀个 css

npm install --save-dev css-loader

rules: [
  ...,
 {
  test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
     // 启用/禁用 url() 处理
     url: true,
     // 启用/禁用 @import 处理
     import: true,
        // 启用/禁用 Sourcemap
        sourceMap: false
      }
    }
 }
]

如果只通过css-loader加载文件,这时候页面代码设置的样式并没有生效

原因在于,css-loader只是负责将.css文件进行一个解析,而并不会将解析后的css插入到页面中

如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是style-loader

style-loader

把 css-loader 生成的内容,用 style 标签挂载到页面的 head 中

npm install --save-dev style-loader

rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader"]
 }
]

同一个任务的 loader 可以同时挂载多个,处理顺序为:从右到左,从下往上

less-loader

开发中,我们也常常会使用less、sass、stylus预处理器编写css样式,使开发效率提高,这里需要使用less-loader

npm install less-loader -D

rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader","less-loader"]
 }
]

raw-loader

在 webpack中通过 import方式导入文件内容,该loader并不是内置的,所以首先要安装

npm install --save-dev raw-loader

然后在 webpack.config.js 中进行配置

module.exports = {
  ...,
  module: {
      rules: [
      {
        test: /\.(txt|md)$/,
        use: 'raw-loader'
     }
    ]
 }
}

file-loader

把识别出的资源模块,移动到指定的输出⽬目录,并且返回这个资源在输出目录的地址(字符串)

npm install --save-dev file-loader

rules: [
  ...,
 {
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images",
        // 打包后文件的 url
        publicPath: './images',
      }
    }
 }
]

url-loader

可以处理理 file-loader 所有的事情,但是遇到图片格式的模块,可以选择性的把图片转成 base64 格式的字符串,并打包到 js 中,对小体积的图片比较合适,大图片不合适。

npm install --save-dev url-loader文章来源地址https://www.toymoban.com/news/detail-624056.html

rules: [
  ...,
 {
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字节转成 base64 格式
        limit: 100
      }
    }
 }
]

到了这里,关于webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 网络基础知识(2)——简单说说IP地址

            Internet 依靠 TCP/IP 协议,在全球范围内实现不同硬件结构、不同操作系统、不同网络系统的主机之间的互联。在 Internet 上,每一个节点都依靠唯一的 IP 地址相互区分和相互联系,IP 地址用于标识互联网中的每台主机的身份,设计人员为每个接入网络中的主机都分

    2024年02月04日
    浏览(51)
  • css基础知识二十:说说对Css预编语言的理解?有哪些区别?

    一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

    2024年02月16日
    浏览(44)
  • webpack基础知识

    webpack的本质是一个第三方模块包,用于分析,并打包代码 支持所有类型的文件打包 支持less/sass= css 支持ES6/7/8=ES5 压缩代码,提高加载速度 yarn安装 配置环境变量 验证 配置scripts 需求 两个js文件打包成一个js文件 index.js add.js 打包命令 在对应src目录下

    2024年02月13日
    浏览(37)
  • css基础知识三:说说em/px/rem/vh/vw的区别?

    一、介绍 传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性 从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式

    2024年02月09日
    浏览(51)
  • webpack基础知识九:如何提高webpack的构建速度?

    一、背景 随着我们的项目涉及到页面越来越多,功能和业务代码也会随着越多,相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关,当我们本地开发启动 devServer 或者 build 的时候,如果时间过长,会大大降低我们的工作效率 所以,优化webpack 构建

    2024年02月14日
    浏览(35)
  • webpack基础知识十:与webpack类似的工具还有哪些?区别?

    一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割,组织和打包应用。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体(bundle) 在前端领域中,并非只有webpack这一款优秀的模块打包工具,还有其他类似的

    2024年02月13日
    浏览(34)
  • css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?

    一、背景 在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉,我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表

    2024年02月10日
    浏览(43)
  • webpack中常见的Loader

    loader 用于对模块的\\\"源代码\\\"进行转换,在 import 或\\\"加载\\\"模块时预处理文件 webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。如下图所示: 在webpack内部中,任何文件都是模块,不仅仅只是js文件 默认情况下,在遇到impo

    2024年02月13日
    浏览(32)
  • Linux常见指令和基础知识

    从这一章开始我们就要正式的进入我们的Linux的学习了,在正式学习之前我们要先熟悉一下Linux的操作和一些基础知识吧。 语法: ls [选项][目录或文件] 功能:对于目录,该命令列出该目录下的所有子目录与文件。对于文件,将列出文件名以及其他信息。 常用选项: 操作演示

    2024年02月07日
    浏览(38)
  • Linux基础知识及常见指令

    什么是Linux? Linux是一个免费开源的操作系统内核,最初由Linus Torvalds于1991年创建。它是各种Linux发行版(通常称为“发行版”)的核心组件,这些发行版是完整的操作系统,包括Linux内核以及各种软件包,如系统实用工具、库和桌面环境等。 什么是Linux终端? Linux 的终端就是

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包