前言
在前端开发中，我们经常需要使用 webpack 对项目进行打包。但是，在打包过程中可能会想要获取到一些更加详细的信息，比如打包出的文件大小、打包时间等等。那么，如何在 webpack 打包过程中获取这些信息呢？
这时，我们可以使用一个叫做 build-statistics-webpack-plugin 的 npm 包，它可以帮助我们获取到当次打包的详细信息，并且将这些信息评估为易读的格式。在这篇文章中，我们将介绍如何使用这个 npm 包。
安装
首先，我们需要安装这个 npm 包。在项目根目录下，使用以下命令可以安装：
npm install build-statistics-webpack-plugin --save-dev
配置
接下来，在 webpack 配置中添加以下代码：
const BuildStatisticsWebpackPlugin = require('build-statistics-webpack-plugin');
module.exports = {
plugins: [
new BuildStatisticsWebpackPlugin(),
],
};通过以上配置，我们向 webpack 添加了一个新的插件。
使用
使用该插件非常简单。在打包完成后，我们只需要在终端中输入以下命令即可：
npm run build -- --stats
这里假设我们的打包命令为 npm run build。通过该命令，我们会在终端中看到如下所示的信息：
Stats File: build-statistics.json ---------------------------------- - Total Sized: 2.89 MB (1356.73 KB gzipped) - Total Files: 67 - Build Time: 4926 ms - Hash: a3453265423def3ffa3a
其中，build-statistics.json 是一个 JSON 文件，他列出了所有打包的详细信息。
我们也可以在 package.json 文件中添加一个命令，以便更加方便地使用 npm 包。在 scripts 中添加以下代码：
"scripts": {
"build": "webpack",
"stats": "npm run build -- --stats"
}这样，我们可以通过以下命令来获取打包信息：
npm run stats
示例代码
以下是一个使用该插件的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------------------- - -------------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- ---- --------------------------------
--总结
通过 build-statistics-webpack-plugin，我们可以方便地获取打包详细信息，这对于项目的优化和调试有着重要的意义。希望该文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3de02bdbf7be33b256712f