【Webpack】预处理器 - loader配置介绍

预处理器 (loader) ，的主要功能是赋予了 Webpack 可处理不同资源类型的能力，极大丰富了其可扩展性。

一个Web工程通常会包含HTML、JS、CSS、模板、图片、字体等多种类型的静态资源，并且这些资源之间都存在着某种联系。对于 Webpack 来说，所有这些静态资源都是模块，可以像加载一个JS文件一样去加载它们，如在index.js中加载style.css:

//index.js
import './style.css'

这个style.css虽然是被加载在js文件中，但其实是可以被打包并生成在输出资源目录下，对index.js 文件也不会产生质性的影响。这句引用的实际意义是描述了JS 文件与 CSS 文件之间的依赖关系。

在实际开发中，有时某个页面用到了组件，不光要加载JS文件，还要加载样式，而通过Webpack我们可以采用一种更简洁的方式来表达这种依赖关系

// 。/u1/calendar/index.js
1mport './style.scss'; //引用组件自身样式

// ./page/home/index.js
import Calendar from './ui/calendar/index.js';
import './styles.css' ;// 引用页面自身样式

可以看到，在calendar的JS中加载了其组件自身的样式，而对于页面来说只要载calendar/index.js 即可(以及页面自身的样式)，不需要额引入组件的样式。让Webpack维护模块间的关系可以使工程结构更加直观，代码的可维护性更强。

loader 概述

每个loader本质上都是一个函数。在 Webpack 4之前，函数的输人和输出都必须为字符串; 在Webpack 4之后，loader也同时支持抽象语法树 (AST)的传递，通过这种方法来减少重复的代码解析。用公式表达 loader的本质则为以下形式:

output = loader(input)

举一个例子，当我们使用babel-loader将ES6+的代码转化为ES5时，上面的公式如下:

ES5 =babel-loader(ES6+)

loader 可以是链式的。我们可以对一种资源设置多个loader，第一个loader 的输入是文件源码，之后所有 loader 的输入都为上一个loader 的输出。公式如下：

output = loaderA(loaderB(loaderC(input)))

如在工程中编译SCSS时，我们可能需要如下loader:

Style 标签=style-loader(css-loader(sass-loader(SCSS)))

loader 的配置

要注意loader 做的实际上是一个预处理的工作。

loader的引入

假设我们要处理CSS，首先依照 Webpack“一切皆模块”的思想，从一个JS文件加