Setting the output path for webpack builds

This post is based on webpack version 4.11.1.

When you build with webpack, the deployment artifacts are generated under the dist directory. If you’re going to place these artifacts at the project root, there’s no problem at all. But when you’re working on only some modules of a large project separately, you need to tweak the webpack configuration a bit. You need to configure the path of the static files referenced by the index.html produced as the build output. This is because webpack’s default configuration sets the path of static files to be under the project’s root path. You can change it as shown below.

// config/index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
    // ...
    build: {
        // ...
        // Just change assetsPublicPath to the path you want. The default value is /
        assetsPublicPath: '/survey/dist/', // for example, like this...
        // ...
    }
    // ...
}

(For the Vue CLI webpack configuration, please refer to this post)

The end!