feat: add Webpackbar

src/config/webpack.base.config.ts

@@ -5,6 +5,8 @@ import { VueLoaderPlugin } from 'vue-loader'
 import consola from 'consola'
 import { makeHappyPack } from 'src/utils'
 import UglifyJsPlugin from 'uglifyjs-webpack-plugin'
+import Webpackbar from 'webpackbar'
+import { getCommonConfig } from './webpack.common.config'
 
 import { ConfigOptions } from '@types'
 
@@ -25,6 +27,7 @@ export function getBaseConfig(options: ConfigOptions.options) {
   }
 
   return (merge as any)(
+    getCommonConfig(mode),
     {
       mode: isProd ? 'production' : 'development',
       context: options.rootDir,
@@ -65,12 +68,12 @@ export function getBaseConfig(options: ConfigOptions.options) {
           new UglifyJsPlugin({
             uglifyOptions: {
               compress: {
-                warnings: false,
+                warnings: false
               },
               output: {
-                ecma: 5,
+                ecma: 5
               },
-              ecma: 8,
+              ecma: 8
             },
             parallel: true
           })
@@ -81,14 +84,16 @@ export function getBaseConfig(options: ConfigOptions.options) {
         maxAssetSize: 1024 * 300,
         hints: isProd ? 'warning' : false
       },
-      plugins: (
-        isProd ? [] : [
-          new FriendlyErrorsPlugin(),
-          new ForkTsCheckerWebpackPlugin({
-            vue: true, // 开启以检测 .vue 文件中的类型错误
-            ignoreDiagnostics: [2339]
-          }),
-        ]
+      plugins: (isProd
+        ? []
+        : [
+            new Webpackbar(),
+            new FriendlyErrorsPlugin(),
+            new ForkTsCheckerWebpackPlugin({
+              vue: true, // 开启以检测 .vue 文件中的类型错误
+              ignoreDiagnostics: [2339]
+            })
+          ]
       ).concat([
         new VueLoaderPlugin(),
         makeHappyPack('ts', [

src/config/webpack.client.config.ts

@@ -13,6 +13,7 @@ export async function getClientConfig(options: ConfigOptions.options) {
   return (merge as any)(
     getBaseConfig(options),
     {
+      name: 'client',
       entry: {
         app: './src/entry-client.js'
       },

src/config/webpack.common.config.ts

@@ -0,0 +1,10 @@
+import Webpackbar from 'webpackbar'
+
+export function getCommonConfig(mode: "development" | "production" | "none") {
+  const isProd = mode !== 'development'
+  return {
+    plugins: isProd ? [
+      new Webpackbar(),
+    ]: []
+  }
+}

src/config/webpack.config.config.ts

@@ -1,6 +1,8 @@
 import nodeExternals from 'webpack-node-externals'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import webpack from 'webpack'
+import merge from 'webpack-merge'
+import { getCommonConfig } from './webpack.common.config'
 
 const babelLoder = {
   loader: 'babel-loader',
@@ -14,7 +16,8 @@ export function getConfigConfig({
 }: {
   rootDir: string
 }): webpack.Configuration {
-  return {
+  return (merge as any)(getCommonConfig('development'), {
+    name: 'config',
     devtool: false,
     target: 'node',
     context: rootDir,
@@ -40,8 +43,6 @@ export function getConfigConfig({
         }
       ]
     },
-    plugins: [
-      new ForkTsCheckerWebpackPlugin()
-    ]
-  }
+    plugins: [new ForkTsCheckerWebpackPlugin()]
+  })
 }

src/config/webpack.dll.config.ts

@@ -6,6 +6,8 @@ import { ConfigOptions } from '@types'
 import consola from 'consola'
 import webpack from 'webpack'
 
+import { getCommonConfig } from './webpack.common.config'
+
 export function getDllConfig(
   options: ConfigOptions.options
 ): webpack.Configuration {
@@ -19,7 +21,9 @@ export function getDllConfig(
   const dll = options.webpack.dll
 
   return (merge as any)(
+    getCommonConfig(mode),
     {
+      name: 'dll',
       mode,
       entry: dll.entry,
       output: {
@@ -42,7 +46,7 @@ export function getDllConfig(
         maxEntrypointSize: 1024 * 500,
         maxAssetSize: 1024 * 500,
         hints: isProd ? 'warning' : false
-      },
+      }
     },
     getDllPlugin(dll),
     dll.webpack

src/config/webpack.extensions.config.ts

@@ -3,6 +3,7 @@ import merge from 'webpack-merge'
 import nodeExternals from 'webpack-node-externals'
 import webpack from 'webpack'
 import consola from 'consola'
+import { getCommonConfig } from './webpack.common.config'
 
 export function getExtensionsConfig(
   options: ConfigOptions.options
@@ -38,7 +39,9 @@ export function getExtensionsConfig(
   const isProd = mode === 'production'
 
   return (merge as any)(
+    getCommonConfig(mode),
     {
+      name: 'extensions',
       mode,
       devtool: false,
       target: 'node',

src/config/webpack.server.config.ts

@@ -21,6 +21,7 @@ export function getServerConfig(options: ConfigOptions.options) {
   return (merge as any)(
     getBaseConfig(options),
     {
+      name: 'server',
       target: 'node',
       entry: './src/entry-server.js',
       output: {

src/utils/compiler.webpack.ts

@@ -21,6 +21,7 @@ function showError(stats: webpack.Stats) {
     stats.compilation.errors.forEach(error => {
       consola.fatal(error)
     })
+    return process.exit(0)
   }
 }
 
@@ -34,7 +35,7 @@ function prodCompiler({
   clientCompilerDone,
   serverCompilerDone
 }: BuildService.compiler.prodCompilerOptions) {
-  const clientCompiler = webpack(clientConfig)
+  const clientCompiler = getCompiler(clientConfig)
   clientCompiler.plugin('done', stats => {
     clientCompilerDone({ stats })
   })
@@ -43,7 +44,7 @@ function prodCompiler({
     consola.log(stats.toString())
   })
 
-  const serverCompiler = webpack(serverConfig)
+  const serverCompiler = getCompiler(serverConfig)
   serverCompiler.plugin('done', stats => {
     serverCompilerDone({ stats })
   })
@@ -94,7 +95,7 @@ function devCompiler({
     new webpack.NoEmitOnErrorsPlugin()
   )
 
-  const clientCompiler = webpack(clientConfig)
+  const clientCompiler = getCompiler(clientConfig)
 
   // clientCompiler.hooks.compile.tap('stats-plugin', stats => {
   //   consola.info('compile\n', JSON.stringify(stats, null, 2))
@@ -103,6 +104,7 @@ function devCompiler({
   const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
     publicPath: clientConfig.output.publicPath,
     noInfo: true,
+    logLevel: 'warn',
     writeToDisk: false
   })
 
@@ -120,7 +122,7 @@ function devCompiler({
   )
 
   // watch and update server renderer
-  const serverCompiler = webpack(serverConfig)
+  const serverCompiler = getCompiler(serverConfig)
   const mfs = new MFS()
   serverCompiler.outputFileSystem = mfs
   serverCompiler.watch({}, (err, stats) => {
@@ -192,7 +194,7 @@ export function compilerConfig(
         done(config)
       }
     } else if (mode !== 'none') {
-      const compiler = webpack(webpackConfig)
+      const compiler = getCompiler(webpackConfig)
       compiler.plugin('done', stats => {
         stats = stats.toJson()
         stats.errors.forEach((err: any) => consola.error(err))
@@ -226,7 +228,7 @@ export function compilerDll(options: ConfigOptions.options): Promise<any> {
   return new Promise(function(done) {
     const webpackConfig = getDllConfig(options)
 
-    const compiler = webpack(webpackConfig)
+    const compiler = getCompiler(webpackConfig)
     compiler.plugin('done', stats => {
       stats = stats.toJson()
       stats.errors.forEach((err: any) => consola.error(err))
@@ -280,7 +282,7 @@ function prodCompilerExtensions(options: ConfigOptions.options) {
   return new Promise(function(done) {
     const webpackConfig = getExtensionsConfig(options)
 
-    const compiler = webpack(webpackConfig)
+    const compiler = getCompiler(webpackConfig)
     compiler.plugin('done', stats => {
       stats = stats.toJson()
       stats.errors.forEach((err: any) => consola.error(err))
@@ -322,9 +324,10 @@ function devCompilerExtensions(options: ConfigOptions.options, app?: Express) {
       new webpack.NoEmitOnErrorsPlugin()
     )
 
-    const compiler = webpack(webpackConfig)
+    const compiler = getCompiler(webpackConfig)
     const serverDevMiddleware = require('webpack-dev-middleware')(compiler, {
-      noInfo: true
+      noInfo: true,
+      logLevel: 'silent',
     })
     app.use(serverDevMiddleware)
 
@@ -360,3 +363,12 @@ function devCompilerExtensions(options: ConfigOptions.options, app?: Express) {
     app.use(require('webpack-hot-middleware')(compiler, { heartbeat: 5000 }))
   })
 }
+
+/**
+ * 获取 webpack Compiler
+ * @param config webpack 配置文件
+ */
+function getCompiler(config: webpack.Configuration) {
+  consola.info('Working Compiler:', config.name , '\n')
+  return webpack(config)
+}