Webpack 什么是“require.context”？

您可以使用require.context（）函数创建自己的上下文

太好了。什么是“背景”？这实际上是做什么的

它允许您传入要搜索的目录，一个指示 是否也应搜索子目录，以及 要匹配文件的表达式

---

允许我“搜索”？搜索我假设的文件，然后呢？这个函数最终做什么？它的用途是什么？

webpack编译器的主要功能之一是递归地解析所有模块，从条目开始，通过分析

require（）

、

require.context（）

、

import

和

import（）

表达式来构建所有模块依赖关系的图表

webpack和Node.js中对“context”的通常解释是一些目录，用作解析模块路径的基础。例如，使用当前工作目录作为For webpack解析

index.js

条目模块的实际路径；请求

require.resolve（'../../../foo.js'）

的上下文是

\uu dirname

是webpack编译器支持的一项特殊功能，允许您从某个基本目录获取所有匹配的模块。其目的是在编译时告诉webpack将该表达式转换为它可以解析的所有可能匹配模块请求的动态列表，从而将它们添加为构建依赖项，并允许您在运行时需要它们

简而言之，您将在运行时在Node.js中使用globs动态构建所需模块路径列表时，在完全相同的情况下使用

require.context

。返回值是一个可调用的对象，其行为类似于require，其键包含必要的模块请求数据，这些数据可以作为需要模块的参数传递给它

---

有几种方法可以使用它，但我认为两种最常见的用例是自动地需要一些众所周知的模块（例如，您只需添加

some.test.js

测试模块，在某些模块中，您使用

require.context

动态发现所有测试，因此无需记录并记住每次添加新测试模块时手动执行该操作）或加载存储库中的静态资产以向生成输出发送文件（来自其他构建工具的新webpack用户通常会感到惊讶，他们的图像、字体、音频文件和其他资产不会出现在输出中，除非某些模块需要它们）.

这是一个很实用但很长的例子，请耐心听。我将向您展示如何从文件夹中加载HTML片段，并使用Webpack和

require.context（）将其输出到页面上。

现在有很多方法可以使用模板和模板语言来构建网站：你有

把手、小胡子、降价、jasmine、JSX、

和大量的静态生成器来处理它们，比如

Eleventy、Hugo、Gatsby

。更不用说选择普通HTML或某种框架，比如作为

Vue

但有时你只需要从一些文件中获取一些HTML并将其放到页面上。有一种方法可以从文件夹中加载HTML片段，并使用Webpack和

require.context（）将其输出到页面上。

为什么要使用require.context或HTML片段？

如果你想建立一个网站，甚至是一个小的网络应用程序，那么可能会有更直接、可扩展的方法

然而，最近我一直在构建一个简单的组件UI库，希望有一种快速的方法，可以简单地获取一些HTML并将其包含在一个结束页面（或一系列页面）中，以显示库的实时版本

HTML文件不是完整的文档，但是，它们只是HTML的片段，用于封装库中的特定组件以显示其标记。此外，我希望将它们拆分为文件夹中的单独文件，以便更好地组织项目。本文提出的主要问题是找到一种可靠的方法来获取所有文件，因为它们是重新分解部分，而不是整个HTML文档，并按逻辑顺序抓取它们，而不必有一个looong文档

我正在使用Webpack来捆绑所有内容并处理CSS和JS处理，因此尝试找到一种简单的方法来包含Webpack以获取这些文件并处理它们是有意义的。当然还有其他选择，但有些并不完全可行……但这里我们将重点放在基于Webpack的内容上解决方案

Webpack和require.context（）来拯救我们

那么，既然我们已经在使用Webpack来构建这个东西，那么让我们利用Webpack的一个强大功能：

require.context（）。

首先，配置html加载程序来处理我们的文件 首先，因为我们正在加载HTML文件，我们需要安装Webpack的HTML加载器；npm/Thread的一个简单功能是：

npm i -D html-loader or yarn add --dev html-loader

从这里开始，我们需要将html加载器配置添加到我们的

webpack.config.js

module: {
        rules: 
        [
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: {
                    loader: 'html-loader'
                }
            },
            ...
            {
            //other rules here
            }
        ]
      }

现在，如果我们这样做，Webpack可以为我们识别和处理HTML文件：

require('/path/to/html/file.html');

但这只是一个文件，我们需要加载一堆文件，这将是一个不断增长的列表——一次只添加一行是不切实际的

现在我们可以加载HTML文件了，我们可以开始使用

require.context（）

加载文件夹中的一些文件并处理它们的内容

以下是我为实现这一目标所做的：

// grab the element where we'll output the HTML to
const output = document.querySelector('#output');

// create a 'cache' where we can store our built up HTML from our fragments
let htmlFragmentCache = {};

// here, we're creating an anonymous function that loads up our HTML fragments
// then it adds them to our cache object
const importAll = requireContext => requireContext.keys().forEach(key => htmlFragmentCache[key] = requireContext(key));

// next, we call our importAll() function to load the files
// notice how this is where we call the require.context() function
// it uses our file path, whether to load subdirectories and what file type to get
importAll(require.context('./fragments', false, /.html$/));

// finally, we can loop over our cache's keys and add the HTML to our output element
Object.keys(htmlFragmentCache).forEach(key => output.innerHTML += htmlFragmentCache[key]);

就这么简单！当然，即使只有很少的几行代码也可以压缩成一个匿名函数（实际上是一个

立即调用函数表达式或iLife的示例）

来创建一个更干净、更简洁的最终结果：

(context => {
    // need to clear out the current element's contents (just in case!)
    output.innerHTML = '';

    // now, load up the html fragments and add them to the page
    context.keys().forEach(key => output.innerHTML += context(key));
})(require.context('./fragments', false, /.html$/));

就这样，一个非常干净的