refactor: validate webpack config in serve as well + warn publicPath config error

Author: yyx990803

packages/@vue/cli-service/lib/commands/build/index.js

@@ -81,6 +81,7 @@ async function build (args, api, options) {
   const chalk = require('chalk')
   const webpack = require('webpack')
   const formatStats = require('./formatStats')
+  const validateWebpackConfig = require('../../util/validateWebpackConfig')
   const {
     log,
     done,
@@ -123,6 +124,9 @@ async function build (args, api, options) {
     webpackConfig = require('./resolveAppConfig')(api, args, options)
   }
 
+  // check for common config errors
+  validateWebpackConfig(webpackConfig, api, options, args.target)
+
   // apply inline dest path after user configureWebpack hooks
   // so it takes higher priority
   if (args.dest) {
@@ -131,31 +135,6 @@ async function build (args, api, options) {
     })
   }
 
-  // grab the actual output path and check for common mis-configuration
-  const actualTargetDir = (
-    Array.isArray(webpackConfig)
-      ? webpackConfig[0]
-      : webpackConfig
-  ).output.path
-
-  if (!args.dest && actualTargetDir !== api.resolve(options.outputDir)) {
-    // user directly modifies output.path in configureWebpack or chainWebpack.
-    // this is not supported because there's no way for us to give copy
-    // plugin the correct value this way.
-    throw new Error(
-      `\n\nConfiguration Error: ` +
-      `Avoid modifying webpack output.path directly. ` +
-      `Use the "outputDir" option instead.\n`
-    )
-  }
-
-  if (actualTargetDir === api.service.context) {
-    throw new Error(
-      `\n\nConfiguration Error: ` +
-      `Do not set output directory to project root.\n`
-    )
-  }
-
   if (args.watch) {
     modifyConfig(webpackConfig, config => {
       config.watch = true

packages/@vue/cli-service/lib/commands/serve.js

@@ -41,10 +41,14 @@ module.exports = (api, options) => {
     const prepareURLs = require('../util/prepareURLs')
     const prepareProxy = require('../util/prepareProxy')
     const launchEditorMiddleware = require('launch-editor-middleware')
+    const validateWebpackConfig = require('../util/validateWebpackConfig')
 
     // resolve webpack config
     const webpackConfig = api.resolveWebpackConfig()
 
+    // check for common config errors
+    validateWebpackConfig(webpackConfig, api, options)
+
     // load user devServer options with higher priority than devServer
     // in webpck config
     const projectDevServerOptions = Object.assign(

packages/@vue/cli-service/lib/util/validateWebpackConfig.js

@@ -0,0 +1,38 @@
+module.exports = function validateWebpackConfig (
+  webpackConfig,
+  api,
+  options,
+  target = 'app'
+) {
+  const singleConfig = Array.isArray(webpackConfig)
+    ? webpackConfig[0]
+    : webpackConfig
+
+  const actualTargetDir = singleConfig.output.path
+
+  if (actualTargetDir !== api.resolve(options.outputDir)) {
+    // user directly modifies output.path in configureWebpack or chainWebpack.
+    // this is not supported because there's no way for us to give copy
+    // plugin the correct value this way.
+    throw new Error(
+      `\n\nConfiguration Error: ` +
+      `Avoid modifying webpack output.path directly. ` +
+      `Use the "outputDir" option instead.\n`
+    )
+  }
+
+  if (actualTargetDir === api.service.context) {
+    throw new Error(
+      `\n\nConfiguration Error: ` +
+      `Do not set output directory to project root.\n`
+    )
+  }
+
+  if (target === 'app' && singleConfig.output.publicPath !== options.baseUrl) {
+    throw new Error(
+      `\n\nConfiguration Error: ` +
+      `Avoid modifying webpack output.publicPath directly. ` +
+      `Use the "baseUrl" option instead.\n`
+    )
+  }
+}