在前端开发中，使用 Webpack 进行打包是一个必不可少的环节。在打包过程中，我们通常想要了解打包的详细信息，例如打包速度、模块构建顺序等等，以方便我们在开发和调试过程中更加有效地定位和解决问题。本文将介绍如何在命令行中查看 Webpack 打包的详细信息。
查看 Webpack 打包信息的方式
Webpack 打包信息有多种查看方式，包括：
- 命令行输出
- Webpack 官方插件
- 第三方插件
本文将聚焦于第一种方式，即如何通过命令行输出详细信息。
如何在命令行中查看详细信息
默认情况下，Webpack 在打包过程中只输出最基本的信息。要查看详细信息，我们需要在启动的命令行中加入相应的参数。下面介绍几个常用的参数：
--progress
该参数会以进度条的形式输出 Webpack 打包进度及所用时间。例如：
webpack --progress
--display-modules
该参数会输出每个模块的构建信息，包括依赖树、打包后大小等。例如：
webpack --display-modules
--display-reasons
该参数会输出每个模块被引用的原因，可以帮助我们更好地理解整个打包过程。例如：
webpack --display-reasons
--display-chunks
该参数会输出每个 Chunk 的构建信息，包括所包含的模块、打包后大小等。例如：
webpack --display-chunks
--display-error-details
该参数会在打包发生错误时输出详细错误信息，方便我们进行定位和解决问题。例如：
webpack --display-error-details
示例代码
下面是一个使用 Webpack 进行打包的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--加入以上代码，我们可以使用以下命令进行打包并查看详细信息：
webpack --progress --display-modules --display-reasons --display-chunks --display-error-details
总结
通过命令行输出，我们可以方便地查看 Webpack 打包的详细信息，以便更好地进行开发和调试。本文介绍了常用的几个参数，并给出了示例代码方便读者进行实践。希望能够帮助读者更好地使用 Webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461ed28968c7c53b0342af4