简介
在前端开发中，webpack 是一个非常强大和常用的工具，它能够对JS和CSS等资源进行打包、压缩等操作。然而，由于 webpack 的配置比较复杂，容易出错，导致错误信息不够友好，给开发带来很大的困扰。
为了解决这个问题，一个名为 @soda/friendly-errors-webpack-plugin 的 npm 包出现了。它是一个 webpack 插件，可以让 webpack 的错误信息更加友好和易于调试。
安装
首先，您需要在项目中安装此插件：
npm install @soda/friendly-errors-webpack-plugin --save-dev
然后，在 webpack 的配置文件中引入此插件：
-- -------------------- ---- -------
----- --------------------------- - ------------------------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- ------------------------------
--
-- ---
--效果
我们来看一下这个插件的效果。通常，webpack 执行出错时，会显示类似于以下的信息：
通过 FriendlyErrorsWebpackPlugin 插件，加入了错误码、出错位置和相关信息，信息更加清晰易懂：
配置项
FriendlyErrorsWebpackPlugin 插件还可配置一些参数。主要包括以下三个参数：
clearConsole
- 类型: boolean
- 默认值: true
设置是否在每次编译之前清除控制台输出。建议将其设置为 true，以确保每次报错时控制台都是清空状态。
compilationSuccessInfo
- 类型: object (可以设置 message 和 notes 两个属性)
- 默认值: undefined
设置编译成功时需要输出的信息。可以包含两个属性：message 和 notes。message 用于指定主要提示信息，而 notes 用于指定补充信息。例如：
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
message: '编译成功！',
notes: ['欢迎使用。'],
},
}),onErrors
- 类型: function(errors, type)
当编译出错时的回调函数。默认行为是在控制台打印一条信息，该函数的参数有两个。
errors：包含错误信息的数组对象。
type：一个可以是 “error” 或 “warning”的字符串，用于标识哪种类型的错误。
本参数可以自定义错误信息的处理方式：
new FriendlyErrorsWebpackPlugin({
onErrors(severity, errors) {
console.log(severity, errors);
},
}),总结
@npm/friendly-errors-webpack-plugin 是一个非常好用的 webpack 插件，可以有效的提高前端项目的开发效率，降低调试成本。通过前文的介绍，您已经了解了 FriendlyErrorsWebpackPlugin 的基本使用方法、配置项和效果，相信对于您以后的前端开发工作会有很大帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193645