use webpackbar

This commit is contained in:
Pooya Parsa 2018-03-24 17:32:04 +04:30
parent 1204ea45d4
commit 06067bf099
4 changed files with 13 additions and 98 deletions

View File

@ -5,13 +5,13 @@ import webpack from 'webpack'
import _ from 'lodash'
import VueLoader from 'vue-loader'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import WebpackBar from 'webpackbar'
import { isUrl, urlJoin } from '../../common/utils'
import customLoaders from './loaders'
import StyleLoader from './utils/style-loader'
import WarnFixPlugin from './plugins/warnfix'
import ProgressPlugin from './plugins/progress'
import StatsPlugin from './plugins/stats'
export default class WebpackBaseConfig {
@ -212,8 +212,7 @@ export default class WebpackBaseConfig {
plugins.push(new webpack.ProgressPlugin({ profile: true }))
} else {
if (!(this.options.minimalCLI)) {
plugins.push(new ProgressPlugin({
spinner: this.spinner,
plugins.push(new WebpackBar({
name: this.isServer ? 'server' : 'client',
color: this.isServer ? 'orange' : 'green'
}))

View File

@ -1,94 +0,0 @@
import webpack from 'webpack'
import chalk from 'chalk'
import _ from 'lodash'
import logUpdate from 'log-update'
const sharedState = {}
const BAR_LENGTH = 25
const IS_WINDOWS = /^win/.test(process.platform)
const BLOCK_CHAR = IS_WINDOWS ? ' ' : '█'
const BLOCK_CHAR2 = IS_WINDOWS ? '=' : '█'
const ICON_CHAR = IS_WINDOWS ? ':' : '⠸'
const BAR_BEFORE = IS_WINDOWS ? chalk.grey('[') : ''
const BAR_AFTER = IS_WINDOWS ? chalk.grey(']') : ''
export default class ProgressPlugin extends webpack.ProgressPlugin {
constructor(options) {
super(options)
this.handler = (percent, msg, ...details) => this.updateProgress(percent, msg, details)
this.handler = _.throttle(this.handler, 25, { leading: true, trailing: true })
this.options = options
if (!sharedState[options.name]) {
sharedState[options.name] = {
color: options.color
}
}
}
apply(compiler) {
super.apply(compiler)
compiler.hooks.done.tap('progress', () => logUpdate.clear())
}
get state() {
return sharedState[this.options.name]
}
updateProgress(percent, msg, details) {
const progress = Math.floor(percent * 100)
this.state.progress = progress
this.state.msg = msg
this.state.details = details
this.state.isRunning = (progress && progress !== 100) && (msg && msg.length)
// Process all states
let isRunning = false
const lines = []
_.sortBy(Object.keys(sharedState), s => s.name).reverse().forEach(name => {
const state = sharedState[name]
if (state.isRunning) {
isRunning = true
} else {
return
}
const _color = chalk.keyword(state.color)
const _icon = _color(ICON_CHAR)
const _name = _color(_.startCase(name))
const _bar = this._renderBar(state.progress, state.color)
const _msg = chalk.grey(_.startCase(state.msg))
const _progress = chalk.grey('(' + state.progress + '%)')
lines.push([_icon, _name, _bar, _msg, _progress].join(' '))
})
if (!isRunning) {
logUpdate.clear()
} else {
const title = chalk.bgBlue.black('BUILDING')
logUpdate('\n' + title + '\n\n' + lines.join('\n'))
}
}
_renderBar(progress, color) {
const w = progress * (BAR_LENGTH / 100)
const bg = chalk.white(BLOCK_CHAR)
const fg = chalk.keyword(color)(BLOCK_CHAR2)
return BAR_BEFORE +
_.range(BAR_LENGTH).map(i => i < w ? fg : bg).join('') +
BAR_AFTER
}
}

View File

@ -118,7 +118,8 @@
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-middleware": "^3.0.1",
"webpack-hot-middleware": "^2.21.2",
"webpack-node-externals": "^1.6.0"
"webpack-node-externals": "^1.6.0",
"webpackbar": "^1.0.0"
},
"devDependencies": {
"babel-eslint": "^8.2.1",

View File

@ -7537,6 +7537,15 @@ webpack@^4.2.0:
watchpack "^1.5.0"
webpack-sources "^1.0.1"
webpackbar@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/webpackbar/-/webpackbar-1.0.0.tgz#9dd1dcc8c1744233156798d6c882a7ed1d02cc4d"
dependencies:
chalk "^2.3.2"
figures "^2.0.0"
lodash "^4.17.5"
log-update "^2.3.0"
whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"