作者|慕课精英讲师三水清
本文将包括安装Node，NPM，WebPack开发环境，我使用的开发IDE是VScode。由于 Webpack 实际上是用 Node.js 编写的，我们先介绍一下 Node.js 的安装。
安装节点.js
第一步进入 Node.js 官网，选择对应系统的下载包进行下载安装webpack 输出目录，对于 Windows 用户，直接下载安装包进行安装，如果您是 Macos 用户，建议使用 brew 进行安装。我们分别介绍 Node .js 的版本管理和包管理工具。
节点.js版本管理
有许多版本的 Node，.js
包括稳定版和开发版，可能不同的项目需要不同版本的 Node.js，这里我建议你安装 8.9 或更高版本，对于已经安装了 Node .js 的同学webpack 输出目录，可以使用 nvm（Windows 版）来版本 Node .js，（另外阿里有 TNVM，还管理 Node .js 版本，减少了 alinode 版本系列的 Node .js）。
节点.js包管理工具Node .js之所以
如此受欢迎，离不开庞大的社区建设，这里首先要归功于 NPM 团队的贡献，Node .js编写的代码，可以打包发布到 JavaScript 包管理平台 npmjs.com（这个存储的地方通常称为仓库），当我们的项目需要使用包（模块）时， 您可以直接使用包管理工具安装（下载）对应的包，我们也可以免费注册一个账号，发布自己的公共包和私有包供他人使用。
NPM 是围绕语义版本控制 （semver） 的思想设计的，我们在软件版本中会遇到：rc、1.x.x、alpha、beta 和其他名词可以在 semver.org 中解释和引入，简单地说，规范是主版本号。次要版本号。米诺少校。补丁：
1. 主要版本号：当您进行不兼容的 API 更改时;
2.小版本号：当您向上兼容功能添加时;
3.修订号：当您进行了向上兼容性问题更正时;
NPM 使用名为 package.json 的文件作为
作为 NPM 包的描述文件，package.json 包含包的基本信息（名称、版本号、描述、作者等）和依赖项，例如：
{
"name": "demo",
"version": "1.0.0",
"dependencies": {
"webpack": "^4.29.6"
}
}
版本不仅符合 Semmer 规范，让我们看一下其他两个：
请注意，版本
依赖中 webpack 旁边的数字被添加 ^，这意味着主版本是 4 的最新版本，每次执行安装命令时，都会更新符合此规则的最新包，这可以在 npmsemverrange 部分更详细地看到。
NPM 的常用命令
下面介绍 NPM 的常用命令：安装、删除、初始化和配置。
安装和删除
要安装 NPM 包，请使用
命令 npminstallpackageName，缩写为 npmipackageName，如果执行命令的目录下有 package.json，可以直接使用 npminstall 在 package.json 中安装所有依赖项。如果我们想安装某个版本的软件包，我们可以使用命令 npmipackageName@x.x.x 格式。
如果我们安装依赖包并将这个依赖写入 package.json，我们可以使用命令 npmipackageName--save（缩写为 npmipackageName-S），如果我们
想说 package.json 开发依赖（devdependencies），我们可以使用命令 npmipackageName--save-dev（缩写为 npmipackageName-D）
删除 NPM 包，并使用 npmuninstall 包名称。
本地模式和全局模式
npm 的软件包安装分为本地模式和全局模式，默认为本地模式，即当前创建的目录node_modules
执行 npminstall 命令，然后将安装包及其依赖项下载到 node_modules 目录。全局模式是指安装到全局路径的方法。当 Node .js需要依赖时，会优先查找其当前文件的node_modules，如果没有，则会遍历下node_modules，如果找不到根目录，将使用全局模式下安装的模块，全局模式下安装的包可以指定全局命令， 只需要减少 package.json 中的 bin 数组并指向包中的相应文件即可。要全局安装软件包，请使用命令 npminstall--global,--该命令可以缩写为 -g。
初始化 NPM 项目
npminit 用于初始化和生成一个新的 package.json 文件。输入 npminit 并根据相应的提示回答问题会询问用户一系列问题，如果您认为不需要更改默认配置，只需一路输入即可。
如果使用 -f（表示强制）和 -y（表示是），请跳过问题阶段并直接生成一个新的 package.json 文件。
设置 NPM 映像
因为NPM网站往往不稳定，所以有很多外镜像可以使用，天猫NPM镜像是国外最大的NPM镜像网站，而cnpm包
可以代替官方NPM使用，使用cnpm直接使用天猫镜像来安装NPM包。
一次性镜像方法：
npm [命令] --registry=https://registry.npm.taobao.org
设置默认 npm 以使用天猫镜像
npm config set registry https://registry.npm.taobao.org
使用以下命令安装 cnpm 包，然后像使用 npm 一样直接使用 cnpm，而不添加寄存器
npm install -g cnpm --registry=https://registry.npm.taobao.org
NPM 其他常用命令 NPMScripts
NPM 不仅可以用于模块管理，还可以用于脚本执行。可以将脚本数组添加到 package.json 文件中，以指定 NPM 直接调用的脚本命令。如：
// package.json
{
"scripts": {
"build": "webpack",
"start": "node src/scripts/dev.js"
}
}
在 package.json 中添加数组后，你可以直接使用 npmrunbuild 和 npmrunstart 命令，实际上：
此外，npmrunstart 也可以缩写为 npmstart。
提示：除了 npm 之外，还有一些包管理工具，主要是针对 npm 下载速度慢、node_modules混乱的缺点而设计的，比如 yarn 和 pnpm。
安装 Webpack-cli
Webpack-cli 是 Webpack 的 CLI（命令行界面）工具，如果在项目中，我们可以按照以下形式安装它：
npm install webpack-cli --save-dev
如果你想全局使用 webpack 命令，你可以使用 npminstall-gwebpack-cli 安装。
提示：建议在项目中安装 webpack-cli，并使用 --save-dev 配置将 webpack-cli 放入开发依赖项中。
至此，我们已经为 Webpack 的命令行开发环境做好了准备，下一节开始介绍 webpack-cli 的零配置打包。
总结
本文主要介绍 Webpack 开发环境的构建，从 Node.js 安装和 NPM 的最基本使用入手，指导中学生开始使用 Node.js 开发环境。并介绍 NPM 相关命令的使用和 NPMScripts 的概念，NPMScripts 在使用 NPM 构建项目开发命令时被广泛使用，让我们开始体验 Webpack-cli 的零配置打包！
大家好，我是后端的西瓜哥。今天我们将学习如何使用 webpack 提供的 schema-utils 库。
schema-utils 库用于在实例化加载器和插件时校准传入参数。
如果格式正确，则不会发生任何操作;如果发生错误，控制台将显示详细的错误消息并中断脚本的执行。
让我们看一个简单的用例：
const { validate } = require("schema-utils");
const schema = {
"type": "object",
"properties": {
"filename": {
"type": "string",
}
},
"additionalProperties": false
}
const options = { filename: true }
validate(
schema, // 配置参数的结构描述
options // 实例化插件时，传入的配置参数
)
这里我们有一个描述配置项结构的架构对象：一个对象只能有 filename 属性，属性的值是字符串类型。
选项假设是实例化插件时传入的配置项，这里我故意给出了错误的配置，filename 的值是一个布尔值。
验证方法引发错误，并指出文件名应为字符串。
throw new _ValidationError.default(errors, schema, configuration);
^
ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
- configuration.filename should be a string.
让我们以开发一个插件来解释如何编写配置格式检查的示例。
假设我们想开发一个 HelloWorldPlugin 插件，它在打包时会生成一个额外的文件。
此插件需要传入文件名和内容参数，其中文件名是必需的，内容是可选的。
schema.json
首先webpack 配置参数，我们需要使用 schema.json 文件来描述配置项的结构。
{
"type": "object",
"properties": {
"filename": {
"description": "生成文件的名称",
"type": "string",
"link": "https://cn.bing.com/"
},
"content": {
"description": "文件内容",
"type": "boolean",
"link": "https://cn.bing.com/"
}
},
"required": ["filename"],
"additionalProperties": false
}
描述属性的常见参数：
对于对象：
描述 JSON 对象的架构非常复杂，更多用法可以在 JSON 模式官网上找到。
如何在插件中编写
我们来看看插件类是如何编译的。
const { validate } = require("schema-utils");
const schema = require('./schema.json')
class HelloWorldPlugin {
options;
constructor(options) {
validate(schema, options);
// 如果 validate 没有报错，下面的语句就能正确执行
this.options = options;
}
apply() {
console.log('apply');
}
}
module.exports = HelloWorldPlugin;
这就像向架构对象引入 schema.json 赋值一样简单，然后将传入的架构和插件配置传递到构造函数上的 validate 方法中。
如果测试失败，脚本将中止并提供错误消息。如果校准通过，我们继续执行后续的业务逻辑，比如保存配置项。
报告错误时修改信息输出
有时，我们希望在报告错误时配置错误消息，以使信息更详细。
此时，我们可以使用 validate 方法的第三个可选配置参数，该参数用于在报告错误时更改信息输出。
validate(
schema,
options,
{
name: "【Hello World 插件】",
baseDataPath: "配置项",
postFormatter: (formattedError, error) => {
// 做一些处理
return formattedError;
},
}
);
所有三个参数都是可选的。
这两个参数也可以放在 schema.json 中，只需向最顶层的对象添加一个额外的“title”属性即可。此属性用最后一个空格字符分隔字符串webpack 配置参数，从而生成名称和基本数据路径。
{
"title": "【Hello World 插件】 配置项"
"type": "object",
// ...
}
如果两者都使用，则使用 validate 方法传入的配置优先。
postFormatter可以获取官方输出的错误消息字符串formattedError，我们可以更改它并返回，我们可以复制更改后的错误消息内容。
另一个 error 参数是描述特定错误信息的对象，例如您可以通过 error.key 知道当前错误的类型。
默认输出：
在上一个配置之后添加了输出：
结束
schema-utils 是 webpack 提供的配置项验证库，可以帮助我们校准传入的配置是否正确，并在匹配不正确时打印出更详细的错误消息。
公开的验证方法接受对象描述结构的架构、插件配置和错误消息的配置。
使用 JSON 模式标准描述对象结构很复杂，但掌握一些更常用的属性似乎就足够了。
我是一个后端的猕猴桃家伙，最近一直在啃 webpack 插件，欢迎关注我。
