fix: respect user configured output path

also ensure wc/lib mode respect user raw webpack config.
fix #809

Author: yyx990803

packages/@vue/cli-service/lib/PluginAPI.js

@@ -112,10 +112,11 @@ class PluginAPI {
    * Resolve the final raw webpack config, that will be passed to webpack.
    * Typically, you should call `setMode` before calling this.
    *
+   * @param {ChainableWebpackConfig} [chainableConfig]
    * @return {object} Raw webpack config.
    */
-  resolveWebpackConfig () {
-    return this.service.resolveWebpackConfig()
+  resolveWebpackConfig (chainableConfig) {
+    return this.service.resolveWebpackConfig(chainableConfig)
   }
 
   /**

packages/@vue/cli-service/lib/Service.js

@@ -136,9 +136,9 @@ module.exports = class Service {
     return chainableConfig
   }
 
-  resolveWebpackConfig () {
+  resolveWebpackConfig (chainableConfig = this.resolveChainableWebpackConfig()) {
     // get raw config
-    let config = this.resolveChainableWebpackConfig().toConfig()
+    let config = chainableConfig.toConfig()
     // apply raw config fns
     this.webpackRawConfigFns.forEach(fn => {
       if (typeof fn === 'function') {

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

@@ -1,5 +1,6 @@
 module.exports = function formatStats (stats, dir, api) {
   const fs = require('fs')
+  const path = require('path')
   const zlib = require('zlib')
   const chalk = require('chalk')
   const ui = require('cliui')({ width: 80 })
@@ -39,7 +40,7 @@ module.exports = function formatStats (stats, dir, api) {
   }
 
   function getGzippedSize (asset) {
-    const filepath = api.resolve(`dist/${asset.name}`)
+    const filepath = api.resolve(path.join(dir, asset.name))
     const buffer = fs.readFileSync(filepath)
     return formatSize(zlib.gzipSync(buffer).length)
   }
@@ -54,12 +55,12 @@ module.exports = function formatStats (stats, dir, api) {
       chalk.cyan.bold(`Size`),
       chalk.cyan.bold(`Gzipped`)
     ) + `\n\n` +
-    assets.map(a => makeRow(
-      /js$/.test(a.name)
-        ? chalk.green(`${dir}/${a.name}`)
-        : chalk.blue(`${dir}/${a.name}`),
-      formatSize(a.size),
-      getGzippedSize(a)
+    assets.map(asset => makeRow(
+      /js$/.test(asset.name)
+        ? chalk.green(path.join(dir, asset.name))
+        : chalk.blue(path.join(dir, asset.name)),
+      formatSize(asset.size),
+      getGzippedSize(asset)
     )).join(`\n`)
   )
 

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

@@ -27,13 +27,11 @@ module.exports = (api, options) => {
         args[key] = defaults[key]
       }
     }
-    if (args.dest == null) {
-      args.dest = options.outputDir
-    }
 
     api.setMode(args.mode)
 
     const fs = require('fs')
+    const path = require('path')
     const chalk = require('chalk')
     const rimraf = require('rimraf')
     const webpack = require('webpack')
@@ -58,23 +56,48 @@ module.exports = (api, options) => {
       }
     }
 
+    // respect inline build destination
+    if (args.dest) {
+      api.configureWebpack({
+        output: {
+          path: path.resolve(
+            api.service.context,
+            args.dest
+          )
+        }
+      })
+    }
+
+    // resolve raw webpack config
+    let webpackConfig
+    if (args.target === 'lib') {
+      webpackConfig = require('./resolveLibConfig')(api, args, options)
+    } else if (
+      args.target === 'wc' ||
+      args.target === 'wc-async'
+    ) {
+      webpackConfig = require('./resolveWcConfig')(api, args, options)
+    } else {
+      webpackConfig = api.resolveWebpackConfig()
+    }
+
+    // get final output directory from resolve raw config
+    // because the user may have manually overwritten it too
+    const config = Array.isArray(webpackConfig)
+      ? webpackConfig[0]
+      : webpackConfig
+    const targetDir = config.output.path
+    const targetDirShort = path.relative(
+      api.service.context,
+      targetDir
+    )
+
     return new Promise((resolve, reject) => {
-      const targetDir = api.resolve(args.dest)
       rimraf(targetDir, err => {
         if (err) {
           return reject(err)
         }
-        let webpackConfig
-        if (args.target === 'lib') {
-          webpackConfig = require('./resolveLibConfig')(api, args, options)
-        } else if (
-          args.target === 'wc' ||
-          args.target === 'wc-async'
-        ) {
-          webpackConfig = require('./resolveWcConfig')(api, args, options)
-        } else {
-          webpackConfig = api.resolveWebpackConfig()
-        }
+
         webpack(webpackConfig, (err, stats) => {
           stopSpinner(false)
           if (err) {
@@ -86,9 +109,9 @@ module.exports = (api, options) => {
           }
 
           if (!args.silent) {
-            log(formatStats(stats, options.outputDir, api))
+            log(formatStats(stats, targetDirShort, api))
             if (args.target === 'app') {
-              done(`Build complete. The ${chalk.cyan(options.outputDir)} directory is ready to be deployed.\n`)
+              done(`Build complete. The ${chalk.cyan(targetDirShort)} directory is ready to be deployed.\n`)
               if (
                 options.baseUrl === '/' &&
                 // only log the tips if this is the first build

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

@@ -1,6 +1,6 @@
 const path = require('path')
 
-module.exports = (api, { entry, name, dest }, options) => {
+module.exports = (api, { entry, name }, options) => {
   const libName = (
     name ||
     api.service.pkg.name ||
@@ -31,7 +31,6 @@ module.exports = (api, { entry, name, dest }, options) => {
     }
 
     config.output
-      .path(api.resolve(dest))
       .filename(`${entryName}.js`)
       .chunkFilename(`${entryName}.[id].js`)
       .library(libName)
@@ -77,7 +76,7 @@ module.exports = (api, { entry, name, dest }, options) => {
           }])
     }
 
-    return config.toConfig()
+    return api.resolveWebpackConfig(config)
   }
 
   return [

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

@@ -1,7 +1,7 @@
 const path = require('path')
 const { resolveEntry, fileToComponentName } = require('./resolveWcEntry')
 
-module.exports = (api, { target, entry, name, dest }) => {
+module.exports = (api, { target, entry, name }) => {
   // setting this disables app-only configs
   process.env.VUE_CLI_TARGET = 'web-component'
   // Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
@@ -66,7 +66,6 @@ module.exports = (api, { target, entry, name, dest }) => {
     }
 
     config.output
-      .path(api.resolve(dest))
       .filename(`${entryName}.js`)
       .chunkFilename(`${libName}.[id]${minify ? `.min` : ``}.js`)
       // use relative publicPath so this can be deployed anywhere
@@ -109,7 +108,7 @@ module.exports = (api, { target, entry, name, dest }) => {
           }])
     }
 
-    return config.toConfig()
+    return api.resolveWebpackConfig(config)
   }
 
   return [