Change the method of packaging

webpack.config.js

@@ -16,7 +16,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const webpack = require("webpack"),
-  { exec, spawn } = require("child_process"),
+  { spawn } = require("child_process"),
   path = require("path"),
   HtmlWebpackPlugin = require("html-webpack-plugin"),
   MiniCssExtractPlugin = require("mini-css-extract-plugin"),
@@ -87,15 +87,18 @@ const startAppSpawnProc = onExit => {
         });
 
         proc.on("exit", n => {
+          process.stdout.write("Application process is exited.\n");
+
           if (closed) {
             return;
           }
 
           closed = true;
 
-          onExit();
-          resolve(n);
           appSpawnProc = null;
+          resolve(n);
+
+          onExit();
         });
       });
 
@@ -106,14 +109,65 @@ const startAppSpawnProc = onExit => {
   });
 };
 
-const killAllProc = () => {
+const startBuildSpawnProc = onExit => {
-  if (appBuildProc !== null) {
+  killSpawnProc(appBuildProc, () => {
-    appBuildProc.stdin.end();
+    let mEnv = {};
-    appBuildProc.stdout.destroy();
+
-    appBuildProc.stderr.destroy();
+    for (let i in process.env) {
-    appBuildProc.kill();
+      mEnv[i] = process.env[i];
+    }
+
+    mEnv["NODE_ENV"] = process.env.NODE_ENV;
+
+    process.stdout.write("Generating source code ...\n");
+
+    let proc = spawn("go", ["generate", "./..."], {
+        env: mEnv,
+        detached: true
+      }),
+      waiter = new Promise(resolve => {
+        let closed = false;
+
+        proc.stdout.on("data", msg => {
+          process.stdout.write(msg.toString());
+        });
+
+        proc.stderr.on("data", msg => {
+          process.stderr.write(msg.toString());
+        });
+
+        proc.on("exit", n => {
+          process.stdout.write("Code generation process is exited.\n");
+
+          if (closed) {
+            return;
+          }
+
+          closed = true;
 
           appBuildProc = null;
+          resolve(n);
+
+          onExit();
+        });
+      });
+
+    appBuildProc = {
+      proc,
+      waiter
+    };
+  });
+};
+
+const killAllProc = () => {
+  if (appBuildProc !== null) {
+    killSpawnProc(appBuildProc, () => {
+      killSpawnProc(appSpawnProc, () => {
+        process.exit(0);
+      });
+    });
+
+    return;
   }
 
   killSpawnProc(appSpawnProc, () => {
@@ -133,7 +187,7 @@ module.exports = {
   output: {
     publicPath: "/",
     path: path.join(__dirname, ".tmp", "dist"),
-    filename: "_[hash].js"
+    filename: process.env.NODE_ENV === "development" ? "[id].js" : "[hash].js"
   },
   resolve: {
     alias: {
@@ -141,6 +195,17 @@ module.exports = {
     }
   },
   optimization: {
+    splitChunks:
+      process.env.NODE_ENV === "development"
+        ? {}
+        : {
+            chunks: "all",
+            minSize: 30000,
+            automaticNameDelimiter: ".",
+            automaticNameMaxLength: 16,
+            name: true
+          },
+    minimize: process.env.NODE_ENV !== "development",
     minimizer:
       process.env.NODE_ENV === "development"
         ? []
@@ -197,8 +262,8 @@ module.exports = {
       }
     ]
   },
-  plugins: [
+  plugins: (function() {
-    new webpack.ProgressPlugin(),
+    var plugins = [
       new webpack.SourceMapDevToolPlugin(),
       new webpack.DefinePlugin(
         process.env.NODE_ENV === "production"
@@ -214,7 +279,6 @@ module.exports = {
           handlebarsLoader: {}
         }
       }),
-    new CleanWebpackPlugin(),
       new CopyPlugin([
         {
           from: path.join(__dirname, "ui", "robots.txt"),
@@ -235,46 +299,25 @@ module.exports = {
       ]),
       new VueLoaderPlugin(),
       {
-      apply: compiler => {
+        apply(compiler) {
-        compiler.hooks.afterEmit.tap("AfterEmitPlugin", () => {
+          compiler.hooks.afterEmit.tapAsync(
-          if (appBuildProc !== null) {
+            "AfterEmitPlugin",
-            let aBuildProc = appBuildProc;
+            (_param, callback) => {
-            appBuildProc = null;
+              killSpawnProc(appBuildProc, () => {
-
+                startBuildSpawnProc(() => {
-            process.stdout.write(
+                  callback();
-              "Killing the previous source code generater ...\n"
-            );
-
-            aBuildProc.stdin.end();
-            aBuildProc.stdout.destroy();
-            aBuildProc.stderr.destroy();
-            aBuildProc.kill();
-          }
-
-          killSpawnProc(appSpawnProc, () => {
-            process.stdout.write("Generating source code ...\n");
-
-            appBuildProc = exec(
-              "NODE_ENV=" + process.env.NODE_ENV + " go generate ./...",
-              (err, stdout, stderr) => {
-                process.stdout.write("Source code is generated ...\n");
-
-                appBuildProc = null;
-
-                if (stdout) process.stdout.write(stdout);
-                if (stderr) process.stderr.write(stderr);
 
                   if (process.env.NODE_ENV !== "development") {
                     return;
                   }
 
                   startAppSpawnProc(() => {
-                  appSpawnProc = null;
+                    process.stdout.write("Application is closed\n");
+                  });
+                });
               });
             }
           );
-          });
-        });
         }
       },
       new WebappWebpackPlugin({
@@ -345,17 +388,21 @@ module.exports = {
         }
       }),
       new ImageminPlugin({
-      disable: process.env.NODE_ENV !== "production",
+        disable: process.env.NODE_ENV === "development",
         pngquant: {
-        quality: "10-20"
+          quality: "5-15"
         }
       }),
       new MiniCssExtractPlugin({
-      filename: "_[hash].css",
+        filename:
-      chunkFilename: "_[chunkhash].css"
+          process.env.NODE_ENV === "development" ? "[id].css" : "[hash].css",
+        chunkFilename:
+          process.env.NODE_ENV === "development"
+            ? "[id].css"
+            : "[chunkhash].css"
       }),
       new OptimizeCssAssetsPlugin({
-      assetNameRegExp: /^_.*\.css$/g,
+        assetNameRegExp: /\.css$/,
         cssProcessor: require("cssnano"),
         cssProcessorPluginOptions: {
           preset: ["default", { discardComments: { removeAll: true } }]
@@ -370,5 +417,12 @@ module.exports = {
           ", DO NOT MODIFIY"
       }),
       new ManifestPlugin()
-  ]
+    ];
+
+    if (process.env.NODE_ENV !== "development") {
+      plugins.push(new CleanWebpackPlugin());
+    }
+
+    return plugins;
+  })()
 };