npm 包 error-overlay-webpack-plugin 使用教程

在前端开发中，webpack 是一个不可或缺的工具。然而，在调试代码的时候，我们经常会遇到一些错误信息，有时候这些错误信息可能会让我们看得眼花缭乱。有了 npm 包 error-overlay-webpack-plugin，可以帮助我们更快地定位和解决问题。

什么是 error-overlay-webpack-plugin？

error-overlay-webpack-plugin 是一个 webpack 插件，它可以帮助我们更清晰地展示包含错误的源代码，并提供我们所需的所有上下文信息，比如误报的行和列、代码片段、文件名等等。

安装

使用 npm 安装 error-overlay-webpack-plugin：

npm install --save-dev error-overlay-webpack-plugin

用法

在 webpack 配置中使用 error-overlay-webpack-plugin：

const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');

module.exports = {
  // ...
  devtool: 'cheap-module-source-map',
  plugins: [new ErrorOverlayPlugin()],
  // ...
};

这样，在启动 webpack-dev-server 的时候，如果你的代码包含了错误，就会在浏览器中看到如下信息：

在错误信息卡片的右下角，你会发现一个按钮，可以像下面这样显示详细错误信息：

配置项

error-overlay-webpack-plugin 提供了一些可配置的选项：

你可以通过在实例化插件时传入选项对象来定制这些选项，例如：

  plugins: [
    new ErrorOverlayPlugin({
      overlayStyles: {
        overlay: {
          background-color: 'rgba(0, 0, 0, 0.75)'
        }
      },
      useLegacyOv...: true
    })
  ],

示例代码

这里提供一个示例，演示如何在 webpack-dev-server 中使用 error-overlay-webpack-plugin。

首先，安装 webpack 和 webpack-dev-server：

npm install --save-dev webpack webpack-dev-server

然后，创建两个文件，index.js 和 webpack.config.js，代码如下：

index.js：

const a = 10;
const b = 0;
const c = a / b;
console.log(c);

webpack.config.js：

const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    // port: 8080,
    open: true,
  },
  plugins: [new ErrorOverlayPlugin()],
};

运行 webpack-dev-server，并在浏览器中打开 http://localhost:8080，你会看到如下信息：

在代码编辑器中更改错误代码，保存文件并重新加载页面，您会发现错误信息已经更新了！

以上便是 npm 包 error-overlay-webpack-plugin 的使用教程，当然仅仅只是入门文档。针对于这个插件的更加详细的介绍、配置以及其他还有待您的进一步探索。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53da1