JS每日一题：Webpack有哪些常见的Loader？他们是解决什么问题的？

Hanks10100 发布于2019-08-23 16:28 / 2936人阅读

摘要：期有哪些常见的他们是解决什么问题的在回答之前我们先来了解一下我们在上一节讲过，是属于模块化方案，他能让任意类型的文件都能运行在浏览器中，怎么做到呢这时就有了定义用于对模块的源代码进行转换。

20190326期

Webpack有哪些常见的Loader？他们是解决什么问题的？

在回答之前我们先来了解一下Loader

我们在上一节讲过，webpack是属于模块化方案，他能让任意类型的文件都能运行在浏览器中，怎么做到呢？这时就有了loader

定义: loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。

没太明白? 看下示例可能更清淅

module.exports = {
  module: {
    rules: [
      // 将所有TypeScript 转为 JavaScript，
      // 也就意味着我们使用ts来开发，最终转换成js运行在浏览器端
      { test: /.ts$/, use: "ts-loader" }
    ]
  }
};

常用的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文件到ES5

loader特性

很多同学偏向于使用，不会去在意loader的一些小细节, 这里就顺带说一下

loader 从右到左地取值(evaluate)/执行(execute)

loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上

loader 也可以内联显示指定

loader 可以是同步的，也可以是异步的

loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作

loader 可以通过 options 对象配置

除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块

loader 能够产生额外的任意文件

看了其特性后，我们再看来一组简单的demo进行加深印象

// 内联使用
import Styles from "style-loader!css-loader?modules!./styles.css"

// 下面的一组loader就是链式传递, 从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束
use: [
  { loader: "style-loader" },
  {
    loader: "css-loader",
    // 通过options配置
    options: {
      modules: true,
      minimize:true,
    }
  },
  { loader: "sass-loader" }
]

总结

loader是webpack核心,用于对模块的源代码进行转换

loader支持链式调用，从右至左执行，支持同步或异步函数

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

GPU云服务器云服务器 ecs常见的问题都有哪些常见的域名有哪些 rds常见问题有哪些云主机常见问题有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103070.html

JS每日一题:Webpack有哪些常见的Plugin？他们是解决什么问题的

摘要：期有哪些常见的他们是解决什么问题的定义音译过来就是插件在中插件目的在于解决无法实现的其他事插件是一个具有属性的对象。 20190327期 Webpack有哪些常见的Plugin？他们是解决什么问题的定义: 音译过来就是插件, 在webpack中, 插件目的在于解决 loader 无法实现的其他事 webpack 插件是一个具有 apply 属性的 JavaScript 对象。appl...

songze 2019-08-23 16:31 评论0 收藏0
JS每日一题:Webpack如何实现一个Loader？

摘要：期如何实现一个我们在上几节有讲过今天我们来深入了解它们最暴力的方式莫过于动手实现它们好了，回到正题先来回顾一下定义用于对模块的源代码进行转换。可以使你在或加载模块时预处理文件简单使用是导出为一个函数的模块。 20190329期如何实现一个Loader？我们在上几节有讲过loader,今天我们来深入了解它们,最暴力的方式莫过于动手实现它们好了，回到正题, 先来回顾一下loader ...

HollisChuang 2019-08-26 13:42 评论0 收藏0
我的前端面试

摘要：前言这次找工作也面了好几家公司，也通过了好几家公司的面试，毕竟之前也准备了一段时间，所以面试的时候心里也不是很虚。的代码分割怎么实现的说说刚才提到的和的区别前端缓存怎么实现扯扯强缓存和协商缓存，重点问了如何实现缓存二面就聊了项目。。。前言这次找工作也面了好几家公司，也通过了好几家公司的面试，毕竟之前也准备了一段时间，所以面试的时候心里也不是很虚。这里记录一下面试过程中被问到的问题...

meteor199 2019-08-26 13:29 评论0 收藏0
JS每日一题：Vue-router有哪些钩子？使用场景？

摘要：问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在什么什么之前什么什么之后英文叫专业点叫生命周期，装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解，全 20190218问 Vue-router有哪些钩子？使用场景？ router的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在...

张金宝 2019-08-23 15:18 评论0 收藏0
JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存， 20190116问: 前端的缓存有哪些？都适用什么场景？区别是什么？参考回答前端缓存分为两部分: http 缓存浏览器缓存 http 缓存强...

MockingBird 2019-08-30 15:55 评论0 收藏0