After setting the `publicPath` property of `html-webpack-plugin`, there is no effect

[kimmy-wang]

Version

4.5.13

Reproduction link

https://github.com/realkimmy/vue-cli-mpa

Environment info

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
  Binaries:
    Node: 12.20.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.0 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.13 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.13 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.13 
    @vue/cli-service: ~4.5.0 => 4.5.13 
    @vue/cli-shared-utils:  4.5.13 
    @vue/compiler-core:  3.2.20 
    @vue/compiler-dom:  3.2.20 
    @vue/compiler-sfc: ^3.0.0 => 3.2.20 
    @vue/compiler-ssr:  3.2.20 
    @vue/component-compiler-utils:  3.2.2 
    @vue/devtools-api:  6.0.0-beta.19 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.2.20 
    @vue/ref-transform:  3.2.20 
    @vue/runtime-core:  3.2.20 
    @vue/runtime-dom:  3.2.20 
    @vue/server-renderer:  3.2.20 
    @vue/shared:  3.2.20 
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.16 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0 => 7.19.1 
    jest-serializer-vue:  2.0.2 
    typescript: ~3.9.3 => 3.9.10 
    vue: ^3.0.0 => 3.2.20 
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.10 (3.0.7)
    vue-loader:  15.9.8 (16.8.1)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^4.0.0-0 => 4.0.2 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Run yarn build

What is expected?

1. The resource path in dist/auth/index.html is incorrect, it should be ../

What is actually happening?

1. The resource path in dist/auth/index.html is incorrect

vue.config.js

// vue.config.js
const path = require("path");
const WebpackBar = require("webpackbar");
// const HtmlWebpackPlugin = require("html-webpack-plugin");
// const AssetsWebpackPlugin = require("assets-webpack-plugin");
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const name = "Gitter"; // page title

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: "",
  assetsDir: "static",
  pages: {
    index: "./src/main.js",
    auth: {
      entry: "./src/auth.js",
      filename: "./auth/index.html",
    },
  },
  lintOnSave: process.env.NODE_ENV !== "production",
  productionSourceMap: false,
  configureWebpack: () => {
    const config = {
      name,
      resolve: {
        alias: {
          "@": resolve("src"),
        },
      },
      // entry: {
      //   index: "./src/main.js",
      //   auth: "./src/auth.js",
      // },
      // output: {
      //   path: resolve("dist"),
      //   // filename: (chunkData) => {
      //   //   console.log(chunkData.chunk.name);
      //   //   return chunkData.chunk.name === "index"
      //   //     ? "./[name].[hash].js"
      //   //     : "./[name].[hash].js";
      //   // },
      // },
      // plugins: [
      //   new CleanWebpackPlugin(),
      //   new AssetsWebpackPlugin(),
      //   new HtmlWebpackPlugin({
      //     title: "Home",
      //     template: "./public/index.html",
      //     filename: "./index.html",
      //     chunks: ["chunk-vendors", "chunk-common", "index"],
      //   }),
      //   new HtmlWebpackPlugin({
      //     title: "Auth",
      //     template: "./public/index.html",
      //     filename: "./auth/index.html",
      //     chunks: ["chunk-vendors", "chunk-common", "auth"],
      //     publicPath: "../",
      //   }),
      // ],
    };
    if (process.env.NODE_ENV === "production") {
      config.plugins = [
        // ...config.plugins,
        new WebpackBar({
          name,
        }),
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        }),
      ];
    }
    return config;
  },
  chainWebpack: (config) => {
    config.plugin("html-auth").tap((args) => {
      console.log("args", args);
      args[0].publicPath = "../";
      return args;
    });
  },
};

[kimmy-wang]

Any updates?

[lancetharper]

I've also noticed this

[neal923]

vue-cli@4.5.13 html-webpack-plugin version 3.2.0; html-webpack-plugin version >= 4.x support the publicPath;