什么是 Loader
Webpack 是一个模块打包工具，可以将多个模块打包成一个或多个 bundle，但它只能识别 JavaScript 文件，对于其他类型的文件（如 CSS、图片、字体等），Webpack 无法直接处理。这时候，就需要用到 Loader，它可以让 Webpack 处理非 JavaScript 文件，并将它们转换为 JavaScript 模块。
简单来说，Loader 就是一个函数，接收被打包的文件作为参数，对其进行处理，返回 JavaScript 模块，从而让 Webpack 可以正确处理这个文件。
Loader 有什么用
Loader 可以解决多种问题：
- 处理非 JavaScript 文件：比如将 CSS、LESS、SASS 等转换为 JavaScript 模块，从而可以在 JavaScript 中使用 CSS 样式。
- 转换代码：比如将 ES6 或 TypeScript 代码转换为 ES5，让它可以在不支持 ES6 的浏览器运行。
- 压缩代码：比如将 JavaScript 代码压缩，减小文件体积，提高页面加载速度。
- 分离代码：比如将 CSS 样式分离为独立的文件，避免将 CSS 样式打包进 JavaScript 中，降低 JavaScript 文件大小，提高页面加载速度。
示例代码
下面以处理 CSS 文件为例，介绍如何使用 Loader：
- 安装依赖
首先需要安装两个依赖：
npm install css-loader style-loader --save-dev
- css-loader：处理 CSS 文件，使其可以被识别为模块。
- style-loader：将 CSS 样式插入到 HTML 中。
- 配置 Loader
在 webpack.config.js 中配置 loader，需要在 module.rules 中添加一个对应的规则：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--- test：表示需要处理的文件后缀。
- use：表示使用的 Loader，这里先使用 style-loader，再使用 css-loader。
- 使用 Loader
在 JavaScript 代码中，通过 import 或 require 引入 CSS 文件：
import "./style.css";
这样，Webpack 在打包时会识别出这个 CSS 文件，然后使用 Loader 进行处理，最终将 CSS 样式插入到 HTML 文件中。
总结
Loader 是 Webpack 的重要组成部分，它可以让 Webpack 处理非 JavaScript 文件，并将它们转换为 JavaScript 模块，解决多种问题。使用 Loader 需要注意对应的依赖包和规则配置，然后在 JavaScript 代码中通过 import 或 require 引入文件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c2383b83d39b488164331b