npm start -- --open to launch browser

Author: tony

webpack/webpack.config.ts

@@ -9,41 +9,43 @@ const projectRoot = path.join(__dirname, "../");
 interface IWebpackEnv {
   devServerHost: string;
   devServerPort: string;
+  open: boolean;
   production: boolean;
   watch: boolean;
 }
 
 const defaultEnvironment: IWebpackEnv = {
   devServerHost: "localhost",
   devServerPort: "3013",
+  open: false,
   production: false,
-  watch: false
+  watch: false,
 };
 
 const getConfig = (env: IWebpackEnv): webpack.Configuration => ({
   context: projectRoot,
-  ...(process.argv.some(arg => arg.includes("webpack-dev-server"))
+  ...(process.argv.some((arg) => arg.includes("webpack-dev-server"))
     ? {
         devServer: {
           contentBase: "./dist",
           host: env.devServerHost,
           hot: true,
-          open: true,
+          open: env.open,
           port: parseInt(env.devServerPort, 10),
-          publicPath: "/"
-        }
+          publicPath: "/",
+        },
       }
     : {}),
   // devtool: env.production ? "source-map" : "cheap-module-eval-source-map",
   devtool: "cheap-module-eval-source-map",
   entry: [
-    ...(process.argv.some(arg => arg.includes("webpack-dev-server"))
+    ...(process.argv.some((arg) => arg.includes("webpack-dev-server"))
       ? [
           `webpack-dev-server/client?http://${env.devServerHost}:${env.devServerPort}`,
-          "webpack/hot/dev-server"
+          "webpack/hot/dev-server",
         ]
       : []),
-    "./src/index.ts"
+    "./src/index.ts",
   ],
   mode: env.production ? "production" : "development",
   module: {
@@ -57,10 +59,10 @@ const getConfig = (env: IWebpackEnv): webpack.Configuration => ({
             // other preprocessors should work out of the box, no loader config like this necessary.
             sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax",
             scss: "vue-style-loader!css-loader!sass-loader",
-            ts: "babel-loader!ts-loader"
-          }
+            ts: "babel-loader!ts-loader",
+          },
         },
-        test: /\.vue$/
+        test: /\.vue$/,
       },
       {
         exclude: /node_modules/,
@@ -69,9 +71,9 @@ const getConfig = (env: IWebpackEnv): webpack.Configuration => ({
           loader: "babel-loader",
           options: {
             babelrc: true,
-            configFile: "./.babelrc"
-          }
-        }
+            configFile: "./.babelrc",
+          },
+        },
       },
       {
         exclude: /node_modules/,
@@ -80,31 +82,31 @@ const getConfig = (env: IWebpackEnv): webpack.Configuration => ({
           loader: "ts-loader",
           options: {
             appendTsSuffixTo: [/\.vue$/],
-            configFile: "tsconfig.json"
-          }
-        }
+            configFile: "tsconfig.json",
+          },
+        },
       },
       {
         test: /\.css$/,
-        use: ["vue-style-loader", "css-loader"]
-      }
-    ]
+        use: ["vue-style-loader", "css-loader"],
+      },
+    ],
   },
   output: {
     filename: "app.js",
-    path: path.resolve(projectRoot, "dist")
+    path: path.resolve(projectRoot, "dist"),
   },
   plugins: [
     new VueLoaderPlugin(),
-    new HtmlWebpackPlugin({ template: "./src/index.html" })
+    new HtmlWebpackPlugin({ template: "./src/index.html" }),
   ],
   resolve: {
     alias: {
-      vue$: "vue/dist/vue.esm.js"
+      vue$: "vue/dist/vue.esm.js",
     },
-    extensions: [".ts", ".js", ".vue", ".json"]
+    extensions: [".ts", ".js", ".vue", ".json"],
   },
-  watch: env.watch
+  watch: env.watch,
 });
 
 export default (