Npm 包 electrode-webpack-reporter 使用教程

什么是 electrode-webpack-reporter？

electrode-webpack-reporter是一个webpack插件，它可以为你的webpack构建提供非常详细和深入的统计信息。 它提供了多种不同类型的报告，包括构建持续时间、构建文件、资源大小图表等。

如何使用 electrode-webpack-reporter？

首先，你需要在命令行中使用npm安装该插件:

npm install electrode-webpack-reporter --save-dev

然后，在webpack配置对象中添加该插件:

const ElectrodeWebpackReporter = require('electrode-webpack-reporter');

module.exports = {
  // ...
  plugins: [
    new ElectrodeWebpackReporter()
  ]
}

现在，当你运行webpack构建时，你将看到一个详细的报告在你的控制台中展示。 这个报告会告诉你关于你的构建时间、构建文件、资源文件和分块捆绑大小等等的有用信息。

例如:

Asset                                    Size     Chunks             Chunk Names
main.js                              1.57 MB    0, 11  [emitted]  main
style.css                           12 bytes       11  [emitted]  main
vendor.commons.js                     381 kB  1, 2, 3  [emitted]  vendor.commons
vendor.react-dom.js                   294 kB  1, 2, 3  [emitted]  vendor.react-dom
vendor.react.js                       136 kB  1, 2, 3  [emitted]  vendor.react
manifest.json                          16 kB       11  [emitted]  main

electrode-webpack-reporter 的配置选项

electrode-webpack-reporter插件提供了一些配置选项，允许你自定义它的输出。 可以在创建插件实例时提供这些选项:

-- -------------------- ---- -------
----- ------------------------ - --------------------------------------

-------------- - -
  -- ---
  -------- -
    --- --------------------------
        --------- -------
        ----- -------
        -------------- -----------------------
    --
  -
-
展开代码

下面是一些可用的选项：

reporter

告诉插件使用哪种报告器。 可以是以下值之一：

• 'console' (默认)
• 'json' - 输出为JSON格式的文件
• 'html' - 输出为HTML文件

sort

允许你自定义排序顺序。 可以是以下值之一：

• 'time' (默认) - 按照构建时间排序
• 'size' - 按照文件大小排序
• 'chunks' - 按照分块排序

excludeAssets

允许你排除某些资产。 可以通过提供一个正则表达式来实现。

总结

使用electrode-webpack-reporter可以帮助你更深入地了解你的webpack构建，并使你能够更有效地分析和优化你的应用程序。 在你的下一个webpack构建中给这个插件一个尝试，看看它是否能为你的应用程序带来好处！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65965