加载器 Loader

webpack 目前来说只是帮我们打包js文件，其他文件如.css是不认识的。

而通过安装一些加载器Loader，可以帮助webpack认识这些文件，并且一起打包。

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

webpack 4

css-loader

作用

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

1、安装

npm install css-loader -D

2、配置

style-loader

作用

1、安装

npm install style-loader -D

2、配置

less-loader

作用

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

1、安装

npm install less-loader -D

2、配置

或者同时匹配css或less

PostCSS

作用

1、安装

npm install postcss-loader -D

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

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

3、配置

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

2、安装插件 postcss-preset-env

npm install postcss-preset-env -D

3、配置

file-loader 图片

作用

打包文件，如图片

常用图片有2种方式
（1）img标签，设置src属性


注意，不能直接imgEl.src = “路径”，这样保存的只是字符串，并不会识别成文件

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

1、安装

npm install file-loader -D

2、配置

3、打包

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

4、命名规则

file-loader 字体/字体图标

就是设置class

url-loader

作用

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

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

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

1、安装

npm install url-loader -D

2、配置

3、limit属性

babel-loader

作用

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

1、安装

npm install babel-loader @babel/core

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

2、配置

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

3、安装和使用插件

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

4、预设

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

安装装preset-env

npm install @babel/preset-env

配置

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

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

webpack 5

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

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