webpack中的loader
loader 概念
loader是webpack中的一个概念，本质是一个函数，用于转换，编译模块。
作用
Webpack 它只能处理 js 和 JSON 文件。面对 css 文件还有一些图片等等，Webpack 它自己是不能够处理的，它需要loader 处理其他类型的文件并将它们转换为有效的模块以供应用程序使用并添加到依赖关系图中。例如把一些高级的js语法转换成浏览器可以识别的js语法。
分类
按照执行优先级，可以分为：前置 loader，normal loader，后置 loader.
按照应用场景，可以分为：同步 loader，异步 loader，raw loader.
loader 用法
字段介绍
test:
匹配模块的正则表达式。只有模块名与正则表达式相匹配时，才会使用这个loader来处里相应模块。
loader(use):
模块只需要一个loader处理时，直接使用loader字段来添加对应的loader即可。当需要多个loader处理模块时，需要配置ues字段，字段值为包含了多个loader的数组。执行顺序为从后向前。
exclude:
需要排除哪些路径的模块。
include:
包含哪些路径下的模块。
当loader优先级一样时，执行顺序为从下至上，从右至左。
示例
使用一个loader
{
test: /\.css$/,
loader: "css-loader",
exclude: /node_modules/,
include: /src/,
},
使用多个loader
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /node_modules/,
include: /src/,
},
作用过程
实现一个简单的loader
clean-log-loader：清除代码中的console.log语句
module.exports = function (content, map, meta) {
return content.replace(/console\.log\(.*\);?/g, "");
};
loader接收3个参数。content为模块的内容。map为模块的source-map结构，meta是其他loader传递的一些信息。 经过loader处理后的内容将return回去，作为下一个loader的content参数。
loader的常用api
-
this.async()：用于创建异步回调。在异步loader中，必须首先调用this.async()来告知loader runner等待异步结果，然后返回this.callback()回调函数12。 -
this.callback()：用于同步或异步传递结果。在同步loader中，可以直接返回处理后的内容；在异步loader中，必须调用this.callback()来返回处理结果，可以传递错误、处理后的内容、sourceMap和元信息12。 -
this.getOptions(schema)：用于获取loader的配置。这个方法可以让你访问到配置文件中对当前loader的配置选项。
开发中常用的loader
处理css
-
css-loader：仅处理css的各种加载语法(@import和url()函数等),就像 js 解析 import/require() 一样。
-
postcss-loader：PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。PostCSS 的 autoprefixer 插件是最流行的 CSS 处理工具之一，为css添加浏览器前缀来处理兼容问题。需要配合postcss.config.js配置文件来使用。
-
style-loader: 动态生成syle标签，并把css填充进去，然后插入style标签到页面中，使样式生效。
-
less-loader：处理less
-
sass-loader：处理sass
处理js
babel-loader：把ES5+的语法转化为浏览器可识别的ES5以下的语法。可配合babel相关的配置文件以及一些智能预设来操作。
-
@babel/preset-env：ES2015+ 语法
-
@babel/preset-typescript：TypeScript
-
@babel/preset-react：React
-
@babel/preset-flow：Flow
ts-loader：处理typescript，可配合ts.config.js来编译转换ts语法。
处理图片
file-loader：直接输出图片文件到指定目录
url-loader：也是对图片进行输出，但是url-loader可以根据图片大小对图片进行不同的操作，如果图片大小小于某个值，则把图片转化为base64编码，不打包输出。否则打包输出图片。
{
test: /\.(png|jpg|jpeg)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]_[hash:8].[ext]",
limit: 10240,
},
},
],
},
