前言
在 JavaScript 开发中，我们使用 webpack 工具进行打包，其提供了 watch 模式来自动检测代码改动并进行打包。但是在项目中，我们常常需要知道每次打包耗费的时间，以便优化打包效率。为此，开发人员可以安装 webpack-watch-time-plugin 这个 npm 包来自动记录并展示打包时间。
本文将介绍 webpack-watch-time-plugin 包的安装和使用步骤，以及详细的示例代码。希望通过阅读本文，读者能够掌握该 npm 包的使用方法，并能在实际开发中进行应用和优化。
安装
使用 npm 可以很方便地进行 webpack-watch-time-plugin 的安装：
npm install webpack-watch-time-plugin --save-dev
配置
安装完成后，在 webpack 的配置文件中添加以下代码即可：
-- -------------------- ---- -------
----- --------------- - -------------------------------------
-------------- - -
-- -----
-------- -
--- -----------------
-- ---
--
--
-webpack-watch-time-plugin 提供了以下常用的配置项：
showOnFirstBuild: boolean是否在首次构建时显示时间，默认为true。showInWatchMode: boolean在 watch mode 下显示时间，默认为false。excludeNodeModules: boolean是否排除 node_modules 文件夹，默认为true。
示例代码
本文提供一个简单的示例代码，以展示 webpack-watch-time-plugin 的使用方法。
在以下项目结构中，我们要运行 webpack 对源代码进行打包，并在控制台展示打包耗费的时间。
/ webpack.config.js / src/ / index.js / a.js / dist/
在 webpack.config.js 中配置 webpack-watch-time-plugin：
-- -------------------- ---- -------
----- --------------- - -------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
-------- -
--- ------------------
--
--在 src/index.js 中引入 src/a.js：
import './a.js';
console.log('Hello World!');在 src/a.js 中打印一条信息：
console.log('This is a.');运行 npm run build 命令，即可在控制台看到构建时间：
> webpack --watch 77ms build modules 1 modules 1s add module occurrences [webpack-watch-time-plugin]: Build time: 1.10s
总结
通过本文的介绍，我们了解到了 webpack-watch-time-plugin 的安装、配置和使用方法，也学习了如何在实际项目中应用该插件。在 JavaScript 开发中，如何优化打包效率是我们需要关注的细节之一， webpack-watch-time-plugin 提供了一种简单易用的方案，帮助我们更加清晰地了解每次构建所耗费的时间，从而进行针对性的优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae8db5cbfe1ea0610e68