feat($core): enable webpackChunkName by page's relativePath

[jjangga0214]

Summary

Let's say I have a file system like this.

content
├── api
│   ├── file2.md
│   ├── file3.md
│   ├── graphql
│   │   ├── file2.md
│   │   └── README.md
│   └── README.md
├── biz
│   └── README.md
├── docs
│   ├── README.md
│   └── vuepress.md
└── README.md

Then I run vuepress build content.
The compiled js files would be like this.

public/assets/js
├── 10.363d8cae.js
├── 11.7710dbf4.js
├── 12.66ce535a.js
├── 13.3647659b.js
├── 14.fabd0995.js
├── 2.5c95f722.js
├── 3.56fcaa42.js
├── 4.0cf3496f.js
├── 5.c330506c.js
├── 6.074a5e20.js
├── 7.3ab68fd8.js
├── 8.e6f560b8.js
├── 9.34ce1547.js
└── app.9a37a5f7.js

By this PR, compiled js files would be like this.

public/assets/js
├── 11.5e5f62a6.js
├── 12.1f94a0ad.js
├── 13.646efbc6.js
├── 14.fabd0995.js
├── api
│   ├── file2.md.deb96048.js
│   ├── file3.md.07105d65.js
│   ├── graphql
│   │   ├── file2.md.c9042c17.js
│   │   └── README.md.9db6967e.js
│   └── README.md.d0cc31c9.js
├── app.81d2fb6e.js
├── biz
│   └── README.md.6f99271e.js
├── docs
│   ├── README.md.124a1c6c.js
│   └── vuepress.md.89855cbc.js
└── README.md.a4dbd17c.js

This has two benefits.

1. This enables route-based access control from reverse proxy. For example, if /api route should only be accessed by admin, then the proxy can block /api/* and /assets/js/api/* for others.
2. This is more easy to find compiled output of certain markdown.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

#2117 was the original motivation.

[meteorlxy]

This feature can be achieved by this plugin: vuepress-plugin-named-chunks

[jjangga0214]

@meteorlxy Oh, cool. Thanks for letting me know!
However, I still think this feature is good to be a default.
That's because asset/js/2.5c95f722.js or asset/js/3.56fcaa42.js does not have any useful information, unlike asset/js/api/graphql/README.md.9db6967e.js.
So that users don't need to find and configure the plugin. (For example, I even didn't know the existence of the plugin, so made this PR.)
If a user doesn't want this, then the user can configure plugin that disables webpackNamedChunk.

[jjangga0214]

@meteorlxy I've just tried the plugin you suggested.
How would I make the same result this PR enables?
Either of Vuepress and Vuepress Community docs does not explain what the Page object is.
I can't find the type description, so don't know which field to use, except the key field, which is presented on the example config snippet.
I just tried this, and it just generates "hash", not plain file name like README.md.

// .vuepress/config.js
module.exports = {
  plugins: [
    "named-chunks",
    {
      pageChunkName: page => page.relativePath
    }
  ]
}

assets/js
├── 11.dd6875d2.js
├── 12.46cf4e30.js
├── 13.43de2848.js
├── 14.c8879eeb.js
├── app.2c471855.js
├── page-0b3befcc.b456ef8d.js
├── page-114324f9.9f76105c.js
├── page-2617af59.2e68357c.js
├── page-415a549c.3d8155f9.js
├── page-41e3ea99.c3d6b3a1.js
├── page-592e27bc.50246b91.js
├── page-6fc5200c.70dfdee2.js
├── page-ced17150.77f53a0d.js
└── page-d66b85ce.c262601b.js

[kefranabg]

Nice 👍

[meteorlxy]

@jjangga0214

Things work well here.

    [
      'named-chunks',
      {
        pageChunkName: ({ relativePath }) => relativePath,
      },
    ],

[meteorlxy]

Currently, you can find the types defs of Page here

[kefranabg]

@jjangga0214 is vuepress-plugin-named-chunks working for you?

[kefranabg]

@jjangga0214 I'll close this pr for now: lack of activity