前言
在前端开发过程中，我们都会使用 webpack 进行打包。但是 webpack 在打包过程中并不能直接输出构建的日志信息，这就导致我们无法清楚地知道哪些文件被打包进来，哪些文件被排除等等。因此，为了更好地进行前端开发，我们可以使用一个叫做 webpack-make-log-plugin 的 npm 包来帮助我们输出构建日志信息。
安装
我们可以通过 npm 进行安装：
npm install webpack-make-log-plugin --save-dev
使用
使用 webpack-make-log-plugin 只需要在 webpack.config.js 中加入以下代码即可：
const MakeLogPlugin = require('webpack-make-log-plugin');
module.exports = {
// ... your webpack config
plugins: [new MakeLogPlugin()],
};以上代码会在打包完成后，在根目录下输出一个名为 webpack-log.txt 的文本文件，其中记录了打包的详细信息，如：
-- -------------------- ---- ------- ----- -------------------- -------- ------- ------ ----- ----- ----- --- ---------- -------- ----- ---- ------ ----- ----- -------- ---- --- - --------- ---- ---------- ---- - -------- --- ---------- --- ----- --- ------- --- -------------- -- ----- --- -------
可以看到，webpack-log.txt 文本文件中包含了版本号、构建时间、打包出来的文件、文件大小以及被打包的文件的具体信息等等。
注意事项
需要注意的是，webpack-make-log-plugin 默认是在根目录下输出 webpack-log.txt 文件的，如果你的项目不是在根目录下，而是有自己的目录结构的话，需要指定 webpack-make-log-plugin 的 outputPath 属性：
plugins: [
new MakeLogPlugin({ outputPath: 'custom/path' }),
];这样，webpack-make-log-plugin 就会在自定义目录下输出日志文件。
总结
以上就是本文介绍的 webpack-make-log-plugin 的使用与注意事项。使用这个插件可以帮助我们更好地了解打包信息，从而优化项目构建流程。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f79238a385564ab69a0