vue3多页面运行与打包

前言

  现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包操作。

VUE3多页面打包

方式一：webpack配置

  webpack安装和文档参考。
  直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：

/**
 *配置
 * */

/*path处理模块，可有可无，主要是为了方便路径链接，因为在配置文件内对于参数而言只接受绝对路径，利用path.resovle(__dirname, 相对路径)可以自动生成绝对路径，此模块为webpack自带*/
let path = require('path')
/*vue-loader,vue加载插件，使用npm install vue-loader直接安装即可
*同时对于vue3而言需要单独安装@vue/compiler-sfc,vue2的话是vue-compiler
*/
let vueLoader = require('vue-loader')
/*html-webpack-plugin,模版处理插件，如果存在多个html模版就需要安装
*直接用npm install html-webpack-plugin
*/
let htmlWebPackPlugin = require('html-webpack-plugin')

/**
*compression-webpack-plugin，这是一个可选插件，目的是为了对打包后的文件进行压缩，因为打包后会形成一个大的js文件，文件越大网页打开速度越慢。
*/
let compressionWebpackPlugin = require('compression-webpack-plugin')


module.exports = {
   
    /*打包入口，多入口就是从这里来的，当打包时，会去找到每一个入口文件，
    并根据这个文件依赖去打包，每一个入口写一个key-value对*/
    entry