共计 1966 个字符，预计需要花费 5 分钟才能阅读完成。
本节咱们来学习 webpack 中 loader 加载器的应用，那么什么是 loader 呢。从实质上来说，loader 就是一个 Node.js 模块，在 webpack 的定义中，loader 导出一个函数，loader 会在转换源模块的时候调用该函数。
webpack 自身仍然是只能解决 JS 文件的，然而通过一系列的 loader，就能够解决其余文件啦。例如 Less 和 Sass，以前咱们编译这些 CSS 预处理器，须要应用 gulp 进行编译，而显示能够通过 webpack 中的 loader 加载器来实现。
常见 loader
webpack 中有一系列的 loader，在理论我的项目中，咱们会依据不同的需要应用到不同的 loader。例如 webpack 中的一些常见 loader 如下所示：
css-loader：用于解决css文件，使得能在js文件中引入应用。style-loader：用于将css文件注入到index.html中的<style>标签上。less-loader：解决less代码。sass-loader：解决sass代码。postcss-loader：用postcss来解决 CSS 代码。babel-loader：用babel来转换 ES6 文件到 ES5。file-loader：打包图片，打包字体图标。url-loader：和file-loader相似，然而当文件小于设定的limit时，能够返回一个DataUrl（晋升网页性能）。html-withimg-loader：打包 HTML 文件中的图片。eslint-loader：用于查看常见的 JavaScript 代码谬误，也能够进行 ” 代码标准 ” 查看。
loader 的装置和配置
咱们能够在 webpack.config.js 配置文件中配置 loader，能够在 module.rules 中指定一个或多个 loader。
通过配置loader 的两个属性来实现：
test属性：用来标识出应该被对应的loader进行转换的某个或多个文件。use属性：示意转换时要用哪个loader。
示例：
例如默认状况下 webpack 只能打包 JS 文件，不能辨认其余例如 CSS、Less、image 等类型的文件，那么如果咱们想要打包 CSS 款式文件，能够在 webpack 中应用 loader 加载器，能够将一种文件转换为另一种文件，将 webpack 不能辨认的其它类型文件转换为 webpack 可辨认 JS 类型文件。
首先须要装置 style-loader 和 css-loader，装置命令如下所示：
npm install css-loader style-loader --save-dev命令执行胜利后，这两个 loader 会主动增加到 package.json 的依赖中，如下所示：
"devDependencies": {
"css-loader": "^3.6.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0"
}而后在 webpack.config.js 中配置 loader，在 module 属性的 rule 属性中配置 loader 规定：
module:{
rules:[{
test:/.css$/,
use:['style-loader','css-loader']
}]
}这里示意匹配所有 .css 后缀结尾的文件，通过 style-loader 和 css-loader 加载器进行转换后再编译。
而后咱们创立一个 xkd.css 文件，内容如下所示：
p{
font-size: 12px;
color: red;
}并将 xkd.css 文件导入到 index.js 入口文件中：
document.write('你好，侠课岛！');
// 导入 CSS 文件
import "./xkd.css";而后咱们执行打包命令后会从新生成打包文件，会发现 xkd.css 文件也胜利打包到 bundle.js 文件中。
这就是 loader 的根本应用流程，先装置loader，而后在配置文件中配置 loader，最初再进行打包就能够啦。
loader 个性
loader反对链式调用，链中的每个loader会将转换利用在已解决过的资源上。一组链式的loader将依照相同的程序执行。链中的第一个loader将其后果传递给下一个loader，依此类推。loader能够是同步的，也能够是异步的。loader运行在 Node.js 中，并且可能执行任何操作。loader也能够内联显示指定。loader能够通过options对象配置。- 除了常见的通过
package.json的main来将一个npm模块导出为loader，还能够在module.rules中应用loader字段间接援用一个模块。 - 插件 (plugin) 能够为
loader带来更多个性。 loader可能产生额定的任意文件。