加载器 Loader

image.png
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

作用

image.png
image.png

1、安装

  1. npm install style-loader -D

2、配置

image.png

less-loader

作用

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

1、安装

  1. npm install less-loader -D

2、配置

image.png
或者同时匹配css或less
image.png

PostCSS

作用

image.png

image.png

1、安装

  1. npm install postcss-loader -D

2、安装插件 autoprefixer (可被替代)

这个插件是自动给css加上浏览器前缀,前缀是为了更好适配各种浏览器,如谷歌、火狐、苹果浏览器等
image.png

3、配置

image.png
image.png
也可以单独把配置抽取到外面,这样这里的代码就不用那么复杂
image.png image.png

2、安装插件 postcss-preset-env

image.png

  1. npm install postcss-preset-env -D

3、配置

image.png
image.png

file-loader 图片

作用

打包文件,如图片
image.png
常用图片有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、命名规则

image.png
image.png

file-loader 字体/字体图标

image.png
image.png 就是设置class

image.png

url-loader

作用

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

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

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

1、安装

  1. npm install url-loader -D

2、配置

image.png

3、limit属性

image.png

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、安装和使用插件

插件要额外安装,可以查看https://www.yuque.com/yejielin/mypn47/zu6tft#l1LAa
安装好后配置好就可以了
image.png

4、预设

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

  1. npm install @babel/preset-env

配置
image.png

其他babel的配置可以查看 https://www.yuque.com/yejielin/mypn47/zu6tft#ucmuF

=========================

webpack 5

image.png
也就是webpack5内置了很多常用的loader,让用户不用再下载和配置那么多,体验更好

如url-loader里面关于文件大小的打包和限制
image.png

image.png