在前端开发中，webpack 是不可或缺的工具，它的强大功能让我们可以优化代码、打包资源、处理文件等。为了使 webpack 的配置更加简洁、易于维护，我们通常会使用配置文件，但其中的属性数量和种类众多，如何保证每个属性都是合法、有效的呢？这就需要我们引入一个 npm 包：@webpack-contrib/schema-utils。
@webpack-contrib/schema-utils 简介
@webpack-contrib/schema-utils 是一个用于校验 webpack 配置的工具包。它提供了用于校验 webpack 配置的 schema，将 webpack 配置与 schema 进行比对，以确保 webpack 配置的合法性。这样一来，我们就能够避免许多常见的错误。
安装和使用
在开始使用 @webpack-contrib/schema-utils 之前，我们需要先安装它：
npm install --save-dev @webpack-contrib/schema-utils
安装完成后，我们就可以在 webpack 配置文件中使用它了。例如，我们可以在 webpack 配置文件中引入它：
const { validate } = require('@webpack-contrib/schema-utils');
接下来，我们可以编写一个对应的 schema。例如，下面是一个简单的 schema：
-- -------------------- ---- ------- ----- ------ - - ----- --------- ----------- - ------ - ----- --------- -- ------- - ----- --------- ----------- - --------- - ----- --------- -- -- --------- ------------- -- -- --------- --------- ---------- --展开代码
这是一个用于验证 webpack 配置的 schema，它规定了我们必须配置 entry 和 output 属性，其中 output 属性包含 filename 属性，也就是说我们必须为其指定一个文件名。在 webpack 配置文件中，我们可以使用 validate 方法将配置和 schema 进行比对，如下所示：
-- -------------------- ---- ------- -------------- - ----- ----- -- - ----- ------------- - - ------ ----------------- ------- - --------- ------------ -- ----- --------- -- -------------- -- ----- - ------- -------- - - ---------------- --------------- -- -------------- - -- - ---------------------- ------------- ---------- ---------- ---------------------- -- - ----------------------------- --------------------------- --- ---------------- - -- ---------------- - -- - --------------------- ------------- ---------- --------- ---- ------------ -------------------------- -- - ------------------------------ ---------------------------- --- - ------ -------------- --展开代码
在这个例子中，我们首先将 entry 和 output 属性指定为确定的值，然后使用 validate 方法将其与 schema 进行比对。如果配置不符合 schema 中规定的要求，将会收到一条或多条错误信息。如果配置存在问题但不影响其正常工作，将会收到一些警告。
使用案例
下面是一个使用案例，它要求我们在打包 React 代码时必须指定一个有效的 mode 属性：
-- -------------------- ---- ------- ----- ------ - - ----- --------- ----------- - ----- - ----- --------- -------- ------------------------------- -- -- --------- --------- -- -------------- - ----- ----- -- - ----- ------------- - - ------ ------------------ ------- - ----- ----------------------- ----------- --------- ------------ -- -------- - ----------- ------- -------- -- ------- - ------ - - ----- -------------- -------- ---------------------------------- ---- - ------- --------------- -------- - -------- --------------------- ----------------------- -- -- -- - ----- ---------- ---- ---------------- -------------- -- -- -- -------- - --- ------------------- --------- ---------------------- --- -- ----- --------- -- -------------- -- ----- - ------ - - ---------------- --------------- -- -------------- - -- - ---------------------- ------------- ---------- ---------- ---------------------- -- - ----------------------------- --------------------------- --- ---------------- - ------ -------------- --展开代码
在这个例子中，我们首先定义了一个校验 mode 属性的 schema，它规定了 mode 属性必须是 development 或 production。然后在 webpack 配置文件中，我们使用 validate 方法来检查 mode 属性是否符合要求。如果不符合，将会输出错误信息并终止打包流程。
总结
@webpack-contrib/schema-utils 是 webpack 中非常有用的工具包，它可以帮助我们避免很多常见的错误，并提高 webpack 配置的规范化程度。在实际开发中，我们可以根据实际需要编写对应的 schema，从而验证 webpack 的配置是否合法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116810
