Webpack 是一个强大的前端构建工具，可以帮助我们将多个 JavaScript 模块打包成一个或多个 bundle（捆绑包），然后在网页中引入。但是，默认情况下，Webpack 控制台输出的信息往往不够友好，有时候需要费一番功夫才能找到自己需要的信息。本文将介绍一些实用的技巧，帮助你让 Webpack 输出更加友好易懂。
1. 使用一些有用的插件
Webpack 支持使用插件来扩展其功能。下面是几个常用的插件，它们可以在控制台输出中提供有用的信息。
1.1 friendly-errors-webpack-plugin
这个插件可以帮助我们将 Webpack 输出格式化成更加易读的形式，并且还可以在控制台输出一些错误和警告。在开发环境中使用这个插件特别有用，因为可以让你更快地找到问题所在。
使用方法很简单，只需要在 Webpack 配置文件中添加如下代码：
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
// ...
plugins: [
new FriendlyErrorsPlugin()
]
};1.2 html-webpack-plugin
如果你正在使用 Webpack 生成 HTML 文件，那么这个插件会对你有所帮助。它可以将 Webpack 输出的文件自动插入到 HTML 文件中，并且可以配置一些选项来定制输出。
使用方法如下：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- ---------------- -- -- ---- ----
--
-
--1.3 webpack-bundle-analyzer
如果你发现自己的打包文件越来越大，那么这个插件可以帮助你分析打包文件中的模块大小，以便找到哪些模块正在拖慢打包速度。
使用方法如下：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// ...
plugins: [
new BundleAnalyzerPlugin()
]
};2. 配置 stats 属性
stats 属性可以帮助我们配置 Webpack 输出的信息，从而获得更多控制。下面是一些常用的配置选项。
2.1 colors
这个选项可以配置控制台输出的颜色。
module.exports = {
// ...
stats: {
colors: true
}
};2.2 errors-only
如果你只想看到错误信息，那么可以使用 errors-only 选项。
module.exports = {
// ...
stats: {
errorsOnly: true
}
};2.3 minimal
如果你只想看到一些基本信息，那么可以使用 minimal 选项。
module.exports = {
// ...
stats: 'minimal'
};2.4 modules
如果你想查看每个模块的大小，那么可以使用 modules 选项。
module.exports = {
// ...
stats: {
modules: true
}
};3. 使用 webpack-dashboard
webpack-dashboard 是一个让 Webpack 输出更加友好易懂的工具，可以在控制台输出可视化的面板。它还支持多个插件，可以定制输出内容。
使用方法如下：
npm install webpack-dashboard --save-dev
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
// ...
plugins: [
new DashboardPlugin()
]
};然后在运行 Webpack 命令时添加 --color 选项，即可看到漂亮的控制台输出了。
webpack --config webpack.config.js --color
4. 总结
Webpack 是前端工程化必不可少的一部分，但是默认的控制台输出往往不够友好，影响了我们的开发效率。本文介绍了一些实用的技巧，来让 Webpack 输出更加友好易懂。希望它们能帮助你更好地使用 Webpack 来构建你的项目。
附：示例代码
下面的示例是一个简单的 Webpack 配置文件，包含了本文中讲到的插件和配置。你可以试着在本地运行一下，看一下输出的控制台信息。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - ------------------------------------------
----- - -------------------- - - -----------------------------------
----- --------------- - ------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- --------------------
---------- -
------------ ---------
------ -
------- ----
-
--
-------- -
--- -------------------
--------- ----------------
---
--- -----------------------
--- -----------------------
--- -----------------
--
------ -
------- -----
----------- ----
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522816b95b1f8cacd9ff8b8