前言
在前端开发中，经常需要使用到各种加载器进行资源的加载和加载效果的展示，这一方面是不可或缺的，然而编写加载器也是一件比较浪费时间和精力的事情，这时我们就需要用到一些成熟的加载器。
npm 是目前最流行的 JavaScript 包管理器，而且数量多样的 npm 包让我们能够更快地搭建出我们需要的前端框架。而 basic-loaders 是一种通用的前端加载器，可以适应各种不同类型的加载需求。
本篇文章将详细介绍 npm 包 basic-loaders 的使用方法，并带领读者构建简单的加载器实现。
什么是 basic-loaders
basic-loaders 是一个提供基本且通用的前端加载器的 npm 包，它是基于 Webpack 的 loader 机制实现的。它提供了一系列的加载器类型，如 html，css，js，以及 image 和 file 等等，可以满足各种不同类型的资源加载需求。
其中，html，css 和 js 是我们前端最常用的三种加载器类型，而这三种加载器的使用方法都非常简单：只需要在 webpack 配置文件中定义一个 module，然后分别添加对应的 loader 即可。
例如我们需要使用 html 加载器，可以在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-
------- ----------------------------
--
--
--
--
--
--其中，test 表示需要匹配的文件类型，/.html$/ 表示匹配所有后缀为 .html 的文件；use 表示使用哪个 loader 进行加载，由于我们是使用 html 加载器，所以写上 basic-loaders/html-loader 即可。
basic-loaders 常用 Api
- html-loader
html-loader 是用来加载 html 文件的。它将 html 文件转成模块的形式，可以便于在 JavaScript 中引入使用。
使用方法：
在 webpack.config.js 中配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
------- ----------------------------
--
--
--
--- css-loader 和 style-loader
css-loader 和 style-loader 是用来加载 css 文件的。它将 css 文件转成模块的形式，可以便于在 JavaScript 中引入使用，并且将样式注入到 HTML 中。
使用方法：
在 webpack.config.js 中配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------------------
-----------------------------
--
--
--
--
--- js-loader
js-loader 是用来处理 js 文件的。它通过到处和引入模块，解析所有 require/imports 语句，遇到 require/imports 语句就加载它们要求加载的文件。
使用方法：
在 webpack.config.js 中配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
------- --------------------------
--
--
--
--- file-loader
file-loader 是用来加载文件的。它会把文件拷贝到输出目录，并返回文件的 url 地址。
使用方法：
在 webpack.config.js 中配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
------- ----------------------------
-------- -
----- ----------------------
--
--
--
--
--- url-loader
url-loader 同样是用来加载文件的。它会把文件转成 base64 编码，然后返回 dataurl。
使用方法：
在 webpack.config.js 中配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
------- ---------------------------
-------- -
------ -----
----- ----------------------
--
--
--
--
--使用示例
下面我们以一个简单的 Webpack 应用为例，给出 basic-loaders 的使用方法。
1. 安装 basic-loaders
npm install basic-loaders --save-dev
2. 编写 webpack 配置文件
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ----------
------- ----------------------------
--
-
----- ---------
---- -
---------------------------
-----------------------------
--
--
-
----- --------
------- --------------------------
--
-
----- -------------------
------- ---------------------------
-------- -
------ -----
----- ----------------------
--
--
--
--
--3. 编写 HTML 文件
在 index.html 中使用加载器引入 js 和 css 文件。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------- ----------
----- ---------------- ---------------- --
-------
------
--------- ----------
---- ---------------
------- ------------------------
-------
-------4. 编写 JS 文件
import css from './app.css';
import html from './app.html';
const container = document.getElementById('app');
container.innerHTML = html;5. 编写 CSS 文件
body {
background-color: #f1f1f1;
}
h1 {
color: #333;
}6. 编写图片文件
添加一张图片，名字为 webpack.png。
7. 执行命令打包
在终端中使用命令 webpack 进行打包，打包完成后会生成 bundle.js 和 index.html。打开 index.html 可以看到效果。
总结
basic-loaders 提供了基本常用的加载器类型，使用时只需要简单的配置即可。而且，由于它是基于 Webpack 的 loader 机制实现的，也可以很方便的与 Webpack 配置进行整合。
如果你需要编写一些通用的加载器，就可以借助 basic-loaders，而不需要从头编写。这样可以大大提高开发效率，缩短时间成本，同时也提高开发代码的稳定性和易维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581d81e8991b448d5489