基于 webpack5 搭建的多页面基础开发平台

需求覆盖：复用平台搭建的配置项、复用平台的公共方法和样式代码、每个页面实例都有自己路由和子组件等
技术栈：webpack5+Eslint+babel@7+Sass+vue3 全家桶+vant3+Axios+Git
1. 初始化项目工程，安装 webpack、webpack-cli、webpack-dev-server，创建 src/main.js 入口文件，创建
webpack 配置文件并添加基础的打包配置项，在 package.json 添加 build 生产环境代码打包、dev 开发环境代
码打包、start 启动 webpackDevServer 等常用命令
2. 使用 css-loader、postcss-loader、sass-loader 打包样式文件，使用 mini-css-extract-plugin 合并样式文
件并替代 style-loader 的作用
3. 安装使用 autoprefixer、postcss-px-to-viewport 实现给 CSS3 新样式自动添加厂商前缀，px 单位转视窗口
单位
4. 使用 url-loader、file-loader 打包图片、音频、文档附件
5. 安装使用 babel-loader、@babel/core、@babel/preset-env 将高级 js 语法转化为配置的目标环境 js 代码
6. 安装 vue3.2，安装使用 vue-loader、@vue/compiler-sfc 实现打包 vue 文件
7. 通过 clean-webpack-plugin 自动清除打包文件，通过 html-webpack-plugin 生成打包后的 html 入口文件
8. 优化项目的工程目录，在 src/pages 下创建多页面实例，每个实例都有自己的入口 js 文件和模板 html 文件，
在 webpack 配置文件中动态读取 src/pages 下入口 js 文件，并通过 html-webpack-plugin 生成相应的 html
文件
9. 在 webpack 配置文件中合理使用 resolve 配置来定义路径别名等，使用 splitChunks 优化打包出的文件