About the configuration of Vue-cli3.0. The meaning of the parameters of pages.chunks

encountered a problem while making Vue-cli3.0 multi-page configuration.
if I add the chunks parameter to the pages object in vue.confog.js , the js file will not be automatically introduced into the packaged entry index.html, resulting in no js execution at all.

doesn"t quite understand the meaning of each value in the pages.chunks array in vue.config.js . Is there a boss who can explain. The two sentences on the official website are completely inexplicable.

https://cli.vuejs.org/zh/conf...

// 
//  chunk  vendor chunk
chunks: ["chunk-vendors", "chunk-common", "index"]

throw the source code later. I can"t use github for the time being.

// vue.config.js
const isDev = process.env.NODE_ENV !== "production"

const businessArray = [
    {chunk: "note", chunkName: ""},
    {chunk: "evaluate", chunkName: ""}
]

let pages = {}

businessArray.forEach(v => {
    pages[v.chunk] = {
        // page 
        entry: `src/business/${v.chunk}/index.js`,
        // 
        template: "public/index.html",
        //  dist/index.html 
        filename: `business/${v.chunk}/index.html`,
        //  title 
        // template  title  <title><%= htmlWebpackPlugin.options.title %></title>
        title: v.chunkName,
        // 
        //  chunk  vendor chunk
        // chunksjs
        // 
        // chunks: ["chunk-vendorssss", "chunk-common", `${v.chunk}/index.html`]
    }
})

module.exports = {
    baseUrl: isDev ? "/" : "../",
    pages,
    assetsDir: "common"
}
May.17,2022

found the problem.

The pages parameter in vue.config.js in vue-cli3 is compiled into the html-webpack-plugin configuration in webpack .
so pages.chunks in vue.config.js is also equivalent to chunks in html-webpack-plugin . So you can refer to the https://codeshelper.com/a/1190000007294861-sharparticleHeader9

for the meaning of the parameters.

you can use vue-cli-service inspect command to print webpack configuration to check the effect

in addition. pages in vue.config.js is not only the official parameter: entry, template, filename, title and chunks ) , you can also pass pages the parameter acceptable to html-webpack-plugin, such as favicon (other parameters can be tested by yourself, but other parameters are too lazy to try)

.

in addition. chunk-vendors and chunk-common are not inserted when running to the local server (vue-cli-service serve). You need to hit the production package (vue-cli-service build), and then look at the entry index.html to see that chunk-vendors and chunk-common

have been inserted into html-webpack-plugin.

give an example:

  

my chunks has not changed according to the above. How to get

Menu