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

最新推荐文章于 2024-05-27 10:02:49 发布

原创最新推荐文章于 2024-05-27 10:02:49 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack #overlay #react #配置 #前端工程

前端开发专栏收录该内容

8 篇文章

订阅专栏

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

一、 Console 清理

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idFBwyPb-1587059440513)(http://i.imgur.com/MkUEhYz.gif)]

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(),
  ],
}