Webpack Loader工作原理和配置方式详解

前端大厂最新面试题-Loader.docx Loader 是 Webpack 中的一种机制，用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件。Loader 的主要作用是解决 Webpack 无法直接处理非 JavaScript 文件的问题，例如 CSS、Sass、PNG 等文件类型。 Loader 的配置方式有三种：配置方式、内联方式和 CLI 方式。在配置方式中，我们可以在 webpack.config.js 文件中指定 loader，使用 module.rules 属性来配置多个 loader。每个 loader 对应一个对象的形式，对象属性 test 为匹配的规则，一般情况为正则表达式，属性 use针对匹配到文件类型，调用对应的 loader 进行处理。 Loader 的特性包括： 1. 链式调用：Loader 支持链式调用，每个 loader 会处理之前已处理过的资源，最终变为 js 代码。 2. 同步处理：Loader 可以是同步的。 在面试官的问题中， Loader 解决了 Webpack 无法直接处理非 JavaScript 文件的问题，例如 CSS、Sass、PNG 等文件类型。Loader 使得 Webpack 能够处理这些文件类型，实现了更多的文件类型支持。 在 Loader 的配置中，我们可以使用正则表达式来匹配文件类型，例如 `.css$` 来匹配 CSS 文件。然后，我们可以使用 use 属性来指定对应的 loader，例如 style-loader、css-loader、sass-loader 等。 在 Loader 的链式调用中，每个 loader 都会处理之前已处理过的资源，最终变为 js 代码。例如，在处理 CSS 文件时，我们可以使用 sass-loader、css-loader、style-loader 等 loader 进行处理，顺序为相反的顺序执行。 Loader 是 Webpack 中的一种机制，用于解决 Webpack 无法直接处理非 JavaScript 文件的问题。Loader 的配置方式有多种，包括配置方式、内联方式和 CLI 方式。Loader 的特性包括链式调用和同步处理，能够使得 Webpack 能够处理更多的文件类型。