告别无聊的 Webpack 控制台介面

前言

是否受够了 webpack-dev-server 那杂乱的 log 输出?
是否觉得 Webpack 生产构建过程很无聊?

今天我来介绍(安利)两款可以解除乏味,提高生产效率的 Webpack 插件:

  • webpack-dashboard
  • nyan-progress-webpack-plugin

webpack-dashboard

这是 FormidableLabs 做的,一个可以在开发模式中让 webpack dev server 输出的 log 变成类似 NASA 仪表盘一样的介面。

先看看颜值:webpack-dashboard(请无视上面的 StandardJS 代码检查错误)

仓库地址:FormidableLabs/webpack-dashboard

使用注意:macOS 系统中 Terminal.app 需要确认「显示」-「允许鼠标报告(⌘ + R)」是否开启,如果没有这个功能推荐你用 iTerm2

目前,最新版通过分离的进程和高效的 sockets 进程间通信来解决 stdout(标准输出)问题。

使用方法:

$ npm i -D webpack-dashboard
// webpack.config.dev.js
const DashboardPlugin = require('webpack-dashboard/plugin')  
...
plugins: [  
  new DashboardPlugin()
]
...
// package.json
"scripts": {
  "start": "webpack-dashboard -- node devServer.js"
}

如果用的是 babel-node 写成 webpack-dashboard -- babel-node devServer.js 就可以了。

有意思的是如果你加上 -c 参数,还可以修改主题颜色:-c magenta (洋红色)。 magenta

nyan-progress-webpack-plugin

这是一个比较逗比的插件,可以在生产构建时,显示一个彩虹猫(Nyan)形式的进度条,然后在过程中小猫会上下跳,构建完成时,可以自定义小猫说的话。

看颜值: nyan

执行时就像一只跳动的彩虹猫: nyan-cat-gif

仓库地址:alexkuz/nyan-progress-webpack-plugin

使用方法:

$ npm i -D nyan-progress-webpack-plugin

同样也是用添加 plugin 的方式来启用,

// webpack.config.prod.js
const NyanProgressPlugin = require('nyan-progress-webpack-plugin')  
...
plugins: [  
  new NyanProgressPlugin()  
]
...

在构建结束后,彩虹猫默认会喊出「Nyan!」,不过我们可以改成自己想要的,比如:

plugins: [  
  new NyanProgressPlugin({
    // 获取进度的时间间隔,默认 180 ms
    debounceInterval: 60,
    nyanCatSays (progress, messages) {
      if (progress === 1) {
        // 当构建完成时,喊出「呦,又在写 Bug 了?」
        return '呦, 又在写 Bug 了?'
      }
    }
  })
]

nyan

PS:要是能在构建过程中看着彩虹猫在那边跳,然后还放着彩虹猫洗脑歌就更好了!

结尾

面对无聊的 Terminal 回显,这样的开发介面和构建介面是不是会让心情变得好一些呢?

正在加载 Disqus 评论组件...