首页 > 其他分享 >vue.config.js 多页面配置打包 样例

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

时间:2024-09-20 11:24:35浏览次数:7  
标签:about vue chunk 样例 product js html common

基本概念

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');
    },
};

标签:about,vue,chunk,样例,product,js,html,common
From: https://www.cnblogs.com/momoli/p/18422152

相关文章

  • 奥维互动地图经纬度导入,再导出ovjsn再转化为kml格式
    一、使用python将excel表中的经纬度换算成小数格式。在文件上看到的经纬度是东经116°5′27.78″,北纬23°10′57.18″,要转化为116.09105,23.182550000000003格式。如果要用vba编写函数,可能比较麻烦,为此我使用python来转化importsys#获取命令行参数arguments=sys.a......
  • VUE省市区三级联动组件
    :::color5核心搜索<fontstyle="background-color:rgb(250,250,250);">fullCityCode</font>即可:::使用<a-col:span="12"><a-form-model-itemlabel="省市区"prop="fullCityCodeArr">......
  • 前端框架vue和react
    vueVue能力的提升是一个综合性的过程,涉及多个方面的学习和实践。以下是一些具体的例子和策略,可以帮助你提升Vue开发能力:1.深入理解Vue的核心概念1.1响应式系统:深入理解Vue的响应式原理,包括数据绑定、依赖追踪和视图更新机制。Vue的响应式系统是其核心,它允许Vue组件响......
  • vue2和vue3的多种语法形式
    <template><divclass="persion"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>性别:{{sex}}</h2><button@click="nameTel">点击姓名</button>......
  • Vue 2&3进阶面试题:(第二天)
    目录5.vue常用操作指令?6.v-for为什么要绑定key?7.v-if和v-show的区别?8.vue中的修饰符5.vue常用操作指令?v-text指令:用于更新标签包含的文本,它的作用跟双大括号效果是一样的v-html指令:绑定一些包含html代码的数据在视图上v-show指令:指令的取值为true/false,分别对应着显示......
  • Jmeter简单使用二:Json提取器和token
    上一章学习了如何添加http请求,现在开始学习登录以后如何提取token,并且在下一个接口使用token。1、登录接口添加json提取器获取token2、Http信息头管理器添加Authorization3、添加新接口4、启动查看汇总报告5、自定义变量的使用......
  • 详解Vue事件总线的原理与应用:EventBus
    Vue事件总线-组件通信的桥梁引言在Vue.js开发中,组件通信是一个重要的话题。Vue提供了多种方式来实现不同组件之间的通信,譬如Props、$emit、Ref实例、Vuex状态管理及事件总线等等,可谓是五花八门,它们之间使用各有优缺点,主要取决于你的使用场景。本篇文章我们主要介绍......
  • 深入理解Vue3中style的scoped
    概述scoped的作用就是样式模块化(CSSModule),即给组件每一个元素(以及非动态添加的子组件的根元素)加上一个data-v-xxxx的属性,样式选择器也会格式化成选择器[data-v-xxxx],这样就做到了样式隔离,每个组件内定义的样式只对该组件生效,避免了不同组件或页面的样式(选择器)冲突。本文......
  • Vue 目录树正常跳转,浏览器新增页面地址栏输入后created函数请求不走完
    在vue树中开发当created()涉及到多个接口请求的时候,一般我们都是用来渲染页面或者给变量初始化,在实际开发中我遇到了浏览器新增页面用地址直接访问页面数据以默认值展示导致报错,当发现created()涉及多个请求赋初值的情况,将请求用{}包起来保证顺序执行,当每个请求是独立的就会有异步......
  • 【开题报告+文档+源码】基于SpringBoot+Vue的停车场管理系统
    项目背景与意义随着城市化进程的不断推进和汽车保有量的不断增加,城市道路上的停车难题愈发突出。传统的停车管理方式已经难以满足日益增长的停车需求。为了解决这一问题,需要设计并开发一套停车管理系统。本课题旨在基于SpringBoot开发一套停车管理系统,以提供更便捷、高效的停......