webpack进阶篇（二十八）：优化构建时命令行的显示日志

说明

玩转webpack学习笔记

当前构建时的日志显示

展示⼀⼤堆⽇志，很多并不需要开发者关注，比如我们运行 ​​npm run build​​

统计信息 stats

我们可以在生产配置里 ​​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​​

错误效果

修改错误，成功的效果