vue多页配置

vue.config.js

const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    baseUrl: "/",
    outputDir: "dist",
    // 打包之后静态资源保存的目录
    assetsDir: "assets",
    // 配置多页引用的入口
    pages: {
        index: "src/main.js",
        child: {
            entry: "src/child/main.js",
            template: "public/index.html",
            filename: "child.html"
        },
        chain: {
            entry: "src/chain/main.js",
            template: "public/index.html",
            filename: "chain.html"
        }
    },
    // 是否使用eslint
    lintOnSave: false,
    // 是否使用运行时编译器，参见：https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: false,
    // 需要babel编译的node_modules文件(默认babel不作用于node_modules)
    transpileDependencies: [],
    // 是否对js启用sourcemap
    productionSourceMap: true,
    // webpack配置(Object/Function)
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                'process.env': process.env.NODE_ENV
            }),
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './public/index.html',
                // inject: true,
                chunks: ['chunk-vendors', 'index', 'commons']
            }),
            new HtmlWebpackPlugin({
                filename: 'child.html',
                template: './public/index.html',
                inject: true,
                chunks: ['chunk-vendors', 'child', 'commons']
            }),
            new HtmlWebpackPlugin({
                filename: 'chain.html',
                template: './public/index.html',
                inject: true,
                chunks: ['chunk-vendors', 'chain', 'commons']
            })
        ]
    },
    // 提供一个方法修改webpack的配置，包括entry、rules、plugins等，参见：https://github.com/mozilla-neutrino/webpack-chain
    chainWebpack: config => {
        // 新增一个入口
        // config.entry("clone")
        //     .add("./src/utils/clone.js")
        //     .end();

        config.optimization.splitChunks({
            // automaticNameDelimiter: "-",
            cacheGroups: {
                vendors: {
                    name: `chunk-vendors`,
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: 'initial'
                },
                commons: {
                    name: `commons`,
                    priority: -15,
                    minChunks: 2,
                    chunks: 'all',
                    enforce: true
                },
                common: {
                    name: `chunk-common`,
                    minChunks: 2,
                    priority: -20,
                    chunks: 'initial',
                    reuseExistingChunk: true
                }
            }
        })
    },
    css: {
        // 是否对没有.module的文件(*.[ext])使用CSSModules，默认文件类型为*.module.[ext]
        modules: false,
        // 是否将vue组件的<style>单独提出到一个css文件中 
        extract: true,
        // 是否对css启用sourcemap
        sourceMap: false,
        // 对相应的loader进行配置
        loaderOptions: {
            css: {},
            less: {},
            sass: {},
            postcss: {}
        }
    },
    // 配置webpack-dev-server，参见：https://webpack.js.org/configuration/dev-server/
    devServer: {
        port: 8082, // 端口
        open: true, // 是否自动打开浏览器
        proxy: 'http://localhost:4000' // 设置代理
    },
    // 是否使用thread-loader对babel或ts进行转换
    parallel: require('os').cpus().length > 1,
    // pwa配置，参见：https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {
        // name: 'PWA App',
        // themeColor: '#4DBA87',
        // msTileColor: '#000000'
    },
    // 插件中可以调用的选项，可以是第三方插件，例：options.pluginOptions.MyOpts
    pluginOptions: {
        MyOpts: {
            // ...
        }
    }
}