The pages title attribute is configured, but the title attribute is not automatically injected in the generated html-webpack-plugin option.

[wind930]

Version

3.0.0-beta.15

Reproduction link

https://github.com/wind930/vue-multi-page-test

Steps to reproduce

1. vue create my-project or create project by vue ui
2. create vue.config.js and some page in anywhere

module.exports = {
  chainWebpack: config => {
    config
      .entry("app")
      .clear()
      .end();
  },
  pages: {
    index: {
      entry: "src/pages/index/index.ts",
      template: "src/pages/index/index.html",
      filename: "index.html",
      title: "Home"
    },
    login: {
      entry: "src/pages/login/index.ts",
      template: "src/pages/login/index.html",
      filename: "login.html",
      title: "Login"
    }
  }
};

3. exec command : vue-cli-service inspect --mode development, you will found this:

...
    /* config.plugin('html-index') */
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        chunks: [
          'chunk-vendors',
          'chunk-common',
          'index'
        ],
        template: 'src/pages/index/index.html',
        filename: 'index.html',
      }
    ),
    /* config.plugin('html-login') */
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        chunks: [
          'chunk-vendors',
          'chunk-common',
          'login'
        ],
        template: 'src/pages/login/index.html',
        filename: 'login.html',
      }
    ),
...

4. then you will found the page use the default title 『webpack app 』

What is expected?

    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        chunks: [
          'chunk-vendors',
          'chunk-common',
          'index'
        ],
        template: 'src/pages/index/index.html',
        filename: 'index.html',
        title : "Home"
      }
    ),
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        chunks: [
          'chunk-vendors',
          'chunk-common',
          'login'
        ],
        template: 'src/pages/login/index.html',
        filename: 'login.html',
        title : "Login"
      }
    ),

What is actually happening?

The compiled HTML uses the default title attribute "webpack app".

---

Before you can solve this bug, you can still use chainWebpack to modify plug-in options, but I think this is redundant. There should be webpack-cli automatic injection.

module.exports = {
  chainWebpack: config => {
    config
      .entry("app")
      .clear()
      .end();
    config.plugin("html-login").tap(function(args) {
      args[0].title = "Login";
      return args;
    });
    config.plugin("html-index").tap(function(args) {
      args[0].title = "Home";
      return args;
    });
  },
  pages: {
    index: {
      entry: "src/pages/index/index.ts",
      template: "src/pages/index/index.html",
      filename: "index.html",
      title: "Home"
    },
    login: {
      entry: "src/pages/login/index.ts",
      template: "src/pages/login/index.html",
      filename: "login.html",
      title: "Login"
    }
  }
};

[LinusBorg]

support for this was merged only recently (#1619) and hasn't been released yet. I'm afraid you will have to wait until this is released, unless you are up to ake these changes "manually" by changing the options of each HTMLWebpackPlugin instance through the chainWebpackoption.