Webpack 是一个前端代码打包工具，它可以帮助我们将多个 JavaScript 文件合并成一个文件，并能处理一些如图片、字体等资源文件。
除此之外，Webpack 还能处理 JSON 文件。在 Webpack 中，如果我们以 .json 作为模块的扩展名，Webpack 会将它视为 JSON 模块，并使用 JSON-loader 对其进行处理。
JSON-loader
JSON-loader 会将 JSON 文件解析成 JavaScript 对象，以便在其他模块中使用。
让我们来看一个简单的示例。假设我们有一个文件夹 data，其中包含一个名为 users.json 的 JSON 文件，内容如下：
-- -------------------- ---- -------
-
-------- -
-
------- --------
------ --
--
-
------- ------
------ --
--
-
------- ----------
------ --
-
-
-在我们的 JavaScript 代码中，我们可以使用 require() 或 import 导入这个 JSON 文件。
const users = require('./data/users.json');
// 或者
import users from './data/users.json';
console.log(users); // { "users": [ { "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }, { "name": "Charlie", "age": 35 } ] }这样，我们就可以在代码中使用 users 这个对象了。
JSON 文件用途
JSON 文件可以用于存储一些静态的数据，如应用程序的配置、国际化文本等。使用 JSON 文件管理这些数据，可以将逻辑与数据分离，使代码更加清晰易懂。
下面是一个示例。假设我们需要在一个应用程序中显示一些用户评论，我们可以将评论数据存储在一个 JSON 文件中，如下所示：
-- -------------------- ---- -------
-
----------- -
-
----- --
------- --------
---------- ------------
--
-
----- --
------- ------
---------- ---------------
--
-
----- --
------- ----------
---------- -----------
-
-
-我们可以使用 JSON-loader 将这个 JSON 文件导入到一个 JavaScript 模块中，并将其渲染成页面上的 HTML。
-- -------------------- ---- -------
------ -------- ---- -----------------------
----- -------------- - ---------- -- -
----- --------- - ------------------------------------
------------------------ -- -
----- ------- - ------------------------------
----------------- - ----------------- --------------------
-------------------------------
--
--
----------------------------------代码中，我们可以看到 comments 对象中有一个 comments 属性，它的值就是我们在 JSON 文件中定义的评论数组。我们将其传递给 renderComments() 函数，该函数会遍历数组，并将每条评论渲染到页面中。
总结
Webpack 不仅可以处理 JavaScript 模块，还可以处理 JSON 文件。在 Webpack 中，我们可以使用 JSON-loader 将 JSON 文件解析成 JavaScript 对象，并在代码中使用。使用 JSON 文件管理一些静态数据，可以将逻辑与数据分离，使代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae005148841e98949f33e9