加载器 Loader

  • loader可以用于对模块的源代码进行转换
  • 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
  • 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能

webpack 目前来说只是帮我们打包js文件，其他文件如.css是不认识的。
而通过安装一些加载器Loader，可以帮助webpack认识这些文件，并且一起打包。

webpack 4

css-loader

作用

识别css文件并打包
但是要配合style-loader使用，否则只是识别css文件，但还是无法生效

1、安装

  1. npm install css-loader -D

2、配置

image.png

style-loader

作用

  • 我们已经可以通过css-loader来加载css文件了
    • 但是你会发现这个css在我们的代码中并没有生效(页面没有效果)

  • 这是为什么呢?

    • 因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中
    • 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader

      1、安装

      1. npm install style-loader -D

      2、配置

  • 那么我们应该如何使用style-loader

    • 在配置文件中，添加style-loader
    • 注意:因为loader的执行顺序是从右向左(或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面

WebPack-loader 加载器 - 图2

  • 重新执行编译npm run build，可以发现打包后的css已经生效了

    • 当前目前我们的css是通过页内样式的方式添加进来的
    • 后续我们也会讲如何将css抽取到单独的文件中，并且进行压缩等操作

      less-loader

      作用

      识别和转换less文件
      在我们开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高

      1、安装

      1. npm install less-loader -D

      2、配置

      配置webpack.config.js
      WebPack-loader 加载器 - 图3
      或者同时匹配css或less
      WebPack-loader 加载器 - 图4

      PostCSS

      作用

  • PostCSS是一个通过JavaScript来转换样式的工具

    • 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
    • 但是实现这些功能，我们需要借助于PostCSS对应的插件

如何使用PostCSS呢?主要就是两个步骤

  1. 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
  2. 第二步:选择可以添加你需要的PostCSS相关的插件

    1、安装

    1. npm install postcss-loader -D

    2、安装插件 autoprefixer （可被替代）

    这个插件是自动给css加上浏览器前缀，前缀是为了更好适配各种浏览器，如谷歌、火狐、苹果浏览器等
    WebPack-loader 加载器 - 图5

    3、配置

    WebPack-loader 加载器 - 图6
    image.png
    也可以单独把配置抽取到外面，这样这里的代码就不用那么复杂
    image.png image.png

    2、安装插件 postcss-preset-env

  • 我们可以使用另外一个插件: postcss-preset-env
    • postcss-preset-env也是一个postcss的插件
    • 它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill
    • 也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer ) 
      1. npm install postcss-preset-env -D

      3、配置

      image.png
      image.png

      file-loader 图片

      作用

      打包文件，如图片
      要处理jpg.png等格式的图片，我们也需要有对应的loader : file-loader
      file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中
      当然如何修改它的名字和所在文件夹
      常用图片有2种方式
      （1）img标签，设置src属性
      image.png
      image.png
      注意，不能直接imgEl.src = “路径”，这样保存的只是字符串，并不会识别成文件

（2）其他元素如div，设置background-image的css属性；
image.png
image.png

1、安装

  1. npm install file-loader -D

2、配置

image.png

3、打包

会发现随机给我们生成文件的名字，然后放在输出的文件夹内
image.png

4、命名规则

  • 有时候我们处理后的文件名称按照一定的规则进行显示
    • 比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等﹔
  • 这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容
  • 几个最常用的placeholder
    • [ext]:处理文件的扩展名
    • [name]:处理文件的名称
    • [hash]:文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值 ( 32个十六进制）
    • [contentHash] :在file-loader中和[hash]结果是一致的(在webpack的一些其他地方不一样，后面会讲到）[hash:]:截图hash的长度，默认32个字符太长了
    • [path]:文件相对于webpack配置文件的路径

WebPack-loader 加载器 - 图18
file-loader 字体/字体图标
如果我们需要使用特殊的字体或者字体图际，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的
首先,从阿里图标库中下载了几个字体图标
WebPack-loader 加载器 - 图19
在component中引入，并且添加一个i标签用于显示字体图标

WebPack-loader 加载器 - 图20设置class

WebPack-loader 加载器 - 图21

url-loader
作用
url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

base64就是一段文本的代码，一起打包到bundle.js里面，浏览器通过解释这段代码生成图片，这样的好处是减少图片的请求次数，缺点就是增加了单个文件的大小，牺牲了浏览器性能。
WebPack-loader 加载器 - 图22
WebPack-loader 加载器 - 图23
（浏览器引用）

比较适合文件小的而且数量很多的图片文件，因为每一个小图片就是一次网络请求，数量多的话对服务器压力大；
图片大的也可以，但没必要，这样会影响bundle.js 这个文件的大小，下载js代码慢，用户要很久才能看到代码执行。
1、安装

  1. npm install url-loader -D

2、配置

image.png

3、limit属性

  • 但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可
    • 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程
    • 而大的图片也进行转换，反而会影响页面的请求速度
  • 那么，我们如何可以限制哪些大小的图片转换和不转换呢?
    • url-loader有一个options属性limit，可以用于设置转换的限制
    • 下面的代码38kb的图片会进行base64编码，而295kb的不会

WebPack-loader 加载器 - 图25

babel-loader

作用

帮我们把代码做一定的转换，比如ES6+转成ES5，这样兼容更多的浏览器。
也可以查看：https://www.yuque.com/yejielin/mypn47/zu6tft#TAZRU

1、安装

  1. npm install babel-loader @babel/core

如果之前已经安装了@babel/core，那么这里不需要再次安装；

2、配置

image.png
虽然配置好，但不使用插件是没办法进行转换的。

3、安装和使用插件

安装好后配置好就可以了
image.png

4、预设

如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。

  • 常见的预设
    • env
    • react
    • TypeScript

安装preset-env

  1. npm install @babel/preset-env

配置
image.png

webpack 5

  • 我们当前使用的webpack版本是webpack5
    • 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader
    • 在webpack5开始，我们可以直接使用资源模块类型( asset module type )，来替代上面的这些loader ;
  • 资源模块类型(asset module type)，通过添加4种新的模块类型，来替换所有这些loader
    • asset/resource 发送一个单独的文件并导出 URL。之前通过使用file-loader实现
    • asset/inline 导出一个资源的data URI。之前通过使用url-loader实现;
    • asset/source 导出资源的源代码。之前通过使用raw-loader实现;
    • asset在导出一个data URI和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现;

也就是webpack5内置了很多常用的loader，让用户不用再下载和配置那么多，体验更好
如url-loader里面关于文件大小的打包和限制
image.png

image.png