vue.config.js 多页面配置打包 样例

基本概念

Entry Points：每个页面都有自己的入口点（entry point），例如 main-index.js 和 main-about.js。这是每个页面的起点，定义了该页面需要加载的所有资源。
Chunks：由 Webpack 生成的 JavaScript 文件块。每个页面会有自己的 chunk，还有一些共享的 chunk。
Vendor Chunk：包含第三方库的 chunk，通常命名为 chunk-vendors。这个 chunk 包含了所有从 node_modules 中引入的库。
Common Chunk：包含多个页面共享的代码，通常命名为 chunk-common。这个 chunk 包含了在多个入口点之间共享的代码。

示例

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    pages:{
        product: {
            entry: 'src/product/main.js',
            template: 'public/product.html',
            filename: 'product.html',// 可以不写 默认生成的是与template同名
            title: 'Product Page',
            chunks: ['chunk-vendors', 'chunk-common', 'product']
        },
        about: {
            entry: 'src/about/main.js',
            template: 'public/about.html',
            filename: 'about.html',
            title: 'About Page',
            chunks: ['chunk-vendors', 'chunk-common', 'about']
        }
    },
    configureWebpack:{
        output: {
            filename: '[name].[contenthash].js',
            chunkFilename: '[name].[contenthash].js'
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: 'Product',
                filename: 'product-c.html', // 输出文件名   多页面时必须指定 且必须和pages得filename不一样 生成的此文件包含script在body
                template: 'public/product.html',
                inject:'body',
                chunks: ['chunk-vendors', 'chunk-common', 'product'],
                chunksSortMode: 'manual'
            }),
            new HtmlWebpackPlugin({
                title: 'About',
                template: 'public/about.html',
                filename: 'about-c.html',
                chunks: ['chunk-vendors', 'chunk-common', 'about'],
                inject:'body',
                chunksSortMode: 'manual'
            })
        ],
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'chunk-vendors',
                        chunks: 'all',
                    },
                    common: {
                        name: 'chunk-common',
                        minChunks: 2,
                        priority: -20,
                        chunks: 'all',
                        reuseExistingChunk: true,
                    },
                },
            },
        },
    },
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch-about');
        config.plugins.delete('prefetch-product');
    },
};