【源码】基于webpack4和vue的多应用多页面框架

项目简介

本项目是基于webpack4和vue构建的多应用、多页面框架。借助webpack强大的配置能力，支持多应用独立打包，每个应用可独立编译与部署。开发环境下支持热更新功能，能显著提升开发效率。

项目的主要特性和功能

1. 多应用打包：可通过命令行参数灵活指定要打包的应用名称，实现不同应用的独立打包。
2. 环境变量配置：运用cross - env和webpack.DefinePlugin配置环境变量，方便对开发和生产环境进行不同配置。
3. Babel配置：采用babel/preset - env和babel/plugin - transform - runtime编译ES6代码，优化运行时环境。
4. CSS优化：利用MiniCssExtractPlugin实现CSS分块，借助TerserPlugin和OptimizeCSSAssetsPlugin对CSS和JS进行压缩与优化。
5. 打包时间分析：使用speed - measure - webpack - plugin分析打包时间，有助于优化打包速度。
6. 打包分析：借助webpack - bundle - analyzer对打包文件进行分析，方便查看各文件的体积与依赖关系。

安装使用步骤

前提条件

确保已经安装了Node.js v12.16.1或更高版本。

具体步骤

1. 安装依赖：在项目根目录下执行npm install，完成项目依赖的安装。
2. 开发环境：
   • 若要启动app1应用的开发服务器，运行npm run dev:app1。
   • 若要启动app2应用的开发服务器，运行npm run dev:app2。
3. 生产环境：
   • 运行npm run build:app1将app1应用打包到生产环境。
   • 运行npm run build:app2将app2应用打包到生产环境。
4. 打包分析：打包完成后，可访问127.0.0.1:8888查看webpack - bundle - analyzer的打包分析页面。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】