Webpack console 与 debug 体验提升配置教程

版权声明：本文为空谷原创文章，未经博主允许不得转载。如需转载请添加微信：kongguxs001 https://blog.csdn.net/simplehouse/article/details/79318311

Webpack 进行默认编译时会有很多无用的信息，需要进行清理，只显示少量信息，并便于排错。

一、 Console 清理

使用 FriendlyErrorsWebpackPlugin 插件，可以帮助清理 console 的信息。

1. 安装插件

npm i -D friendly-errors-webpack-plugin

2.配置插件

// webpack.config.js 
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
  // ... 
  devServer: {
    // ... 
    quiet: true, // 不显示 devServer 的 Console 信息，让 FriendlyErrorsWebpackPlugin 取而代之
    // ... 
  },
  // ... 
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
  ],
}

二、 实时排错

利用 webpack-dev-server overlay 配置选项可以在编译出现错误时，将错误直接贴到页面上。

    overlay: {
      errors: true, // 编译出现错误时，错误直接贴到页面上
    },

1. 配置方法

module.exports = {
  // ... 
  devServer: {
    // ... 
    overlay: {
      errors: true
    },
    // ... 
}

三、 完整配置

// webpack config root 
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
  // ... 
  devServer: {
    // ... 
    quiet: true,
    overlay: {
      errors: true
    },
    // ... 
  },
  // ... 
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
  ],
}

最终编译、排错效果展示