背景
在前端开发中，我们经常使用打包工具来将多个 JavaScript 文件合并成一个或几个文件，并将 CSS、图片等静态资源进行压缩优化。其中流行的打包工具是 Webpack。
当我们在终端运行 webpack 命令时，Webpack 会生成打包后的文件，并将生成信息输出到控制台。但是，随着项目变得越来越大，这些控制台输出的信息也会变得越来越多，从而影响我们的开发效率。因此，我们需要一种工具能够在打包完成后提醒我们，同时又不会影响我们继续编写代码。
这时候，我们就可以使用 webpack-notifier 这个 npm 包来实现。
安装
使用 npm 或者 yarn 可以很方便地安装 webpack-notifier：
- 使用 npm：
npm install webpack-notifier --save-dev - 使用 yarn:
yarn add webpack-notifier --dev
配置
在使用 webpack-notifier 之前，我们需要对 Webpack 进行一些配置。
首先，在 webpack.config.js 文件中引入 webpack-notifier 模块：
const WebpackNotifierPlugin = require('webpack-notifier');然后，在 plugins 属性中添加 new WebpackNotifierPlugin()：
module.exports = {
// ...其他配置
plugins: [
new WebpackNotifierPlugin()
]
};这样就完成了 webpack-notifier 的配置。我们再次运行 webpack 命令时，就会在操作系统的通知中心（macOS）或任务栏区域（Windows）看到打包完成的通知。
高级配置
除了默认配置，还有一些高级配置可以让我们更好地使用 webpack-notifier。
标题和图标
可以使用 title 和 logo 属性来设置通知的标题和图标：
new WebpackNotifierPlugin({
title: 'Webpack 打包完成',
logo: path.resolve('./img/logo.png')
})报错信息
可以使用 skipFirstNotification 属性来控制是否在第一次打包失败时发送通知。默认情况下，只要打包失败就会发送通知。如果你想在第一次失败后停止发送通知，则可以将其设为 true：
new WebpackNotifierPlugin({ skipFirstNotification: true })自定义消息
可以使用 messageFormatter 属性自定义通知消息。例如，我们可以用以下代码将通知消息设置为 打包完成：文件名：
new WebpackNotifierPlugin({
messageFormatter: (params) => {
return `打包完成：${params[0].split('/').pop()}`;
}
})示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------- - ----------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -----------------------
------ -------- ------
----- ------------------------------
--
-
--总结
本文介绍了 webpack-notifier 这个 npm 包的安装、配置和高级用法，并给出了示例代码。通过使用这个工具，我们可以在打包完成后快速获得通知，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52145