说明
玩转webpack学习笔记
当前构建时的日志显示
展示⼀⼤堆⽇志，很多并不需要开发者关注，比如我们运行 npm run build
统计信息 stats
| Preset | Alternative | Description |
| “errors-only” | none | 只在发生错误时输出 |
| “minimal” | none | 只在发生错误或有新的编译时输出 |
| “none” | false | 没有输出 |
| “normal” | true | 标准输出 |
| “verbose” | none | 全部输出 |
我们可以在生产配置里 webpack.prod.js 添加 stats: 'errors-only' 一下看看效果：
module.exports = { stats: 'errors-only' };
运行 npm run build
可以看出少了好多信息，但是这个交互并不是十分友好。接下来看看下面的优化方案。
如何优化命令行的构建日志
1、使⽤ friendly-errors-webpack-plugin
npm i friendly-errors-webpack-plugin -D
success: 构建成功的⽇志提示warning: 构建警告的⽇志提示error: 构建报错的⽇志提示
2、stats 设置成 errors-only
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); module.exports = { plugins: [ new FriendlyErrorsWebpackPlugin() ], stats: 'errors-only' };
实战演示
1、安装依赖 npm i friendly-errors-webpack-plugin -D
2、webpack.prod.js 添加配置
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); module.exports = { plugins: [ new FriendlyErrorsWebpackPlugin() ], stats: 'errors-only' };
3、运行npm run build的效果
4、webpack.dev.js 添加配置
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin(), new FriendlyErrorsWebpackPlugin() ].concat(htmlWebpackPlugins), devServer: { contentBase: './dist', hot: true, stats: 'errors-only' }, };
5、运行npm run dev
错误效果
修改错误，成功的效果
