使用friendly-errors-webpack-plugin优化webpack的控制台输出

最新推荐文章于 2024-04-12 09:53:18 发布

Armouy

最新推荐文章于 2024-04-12 09:53:18 发布

阅读量6.5k

点赞数

分类专栏：实践总结文章标签： webpack

本文链接：https://blog.csdn.net/qq_34086980/article/details/113603857

版权

实践总结专栏收录该内容

18 篇文章 0 订阅

订阅专栏

如果自己用webpack搭建脚手架的时候，我们经常会看见这么一大串的串的输出：
在这里插入图片描述
为了简化，我们在webpack.config.js加入stats: "errors-only"，这样只有在输出的时候会报错：

为了更加优雅一下我们可以使用friendly-errors-webpack-plugin。

yarn add --dev friendly-errors-webpack-plugin

配置如下：

plugins: [
    // ...
    new FriendlyErrorsWebpackPlugin({
      // 成功的时候输出
      compilationSuccessInfo: {
        messages: [`Your application is running here: http://localhost:8080`]
      },
      // 是否每次都清空控制台
      clearConsole: true,
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "../dist"),
    host: 'localhost',
    port: 8080,
    open: false,
    quiet: true // 如果使用webpack-dev-server，需要设为true，禁止显示devServer的console信息
  }