Pages

基于Webpack 5，TypeScript,React的MPA多页面应用实践配置

• react
• webpack
• typescript
• sass
• eslint
• prettierrc

Usage

git clone https://github.com/19Qingfeng/pages  克隆仓库

yarn 安装依赖

yarn dev 启动开发环境

yarn build 构建生产环境包

yarn build-all  构建所有页面生产环境包

推荐使用yarn基于项目yarn.lock替代npm进行项目环境安装

Documentation

• src/packages 目录为入口文件目录，每个目录下包含main.txs入口文件以及menu-list.ts对应的菜单路由列表。

• src/containers 目录对应不同页面业务逻辑目录,每个container下分别包含:

  • assets静态资源目录

  • views不同路由页面配置

  • styles当前模块下的样式文件列表

  • index.scss当前模块下的入口scss文件。(当前模块所有scss文件都需要在此文件引入，并且该位置必须要在container/**/index.scss)。

• src/layout 目录对应公用layout配置

• layout对应的样式文件需要单独在每个模块的入口文件中引入。

= src/styles 存放全局公用variable以及mixins,reset相关公用样式。

快速上手

• src/packages 页面级别入口文件目录放置。
• src/containers 页面级别业务逻辑处理
• src/components 页面级别公用组件
• src/styles 页面级别scss工具方法
• src/utils 页面级别js工具方法

src级别目录可以通过alias进行访问

比如src/**->@src/**,src/components/**->@components/**...

原则上每个页面可以在src/container/**中组织不同页面各自的目录结构，但是推荐多页面目录保持一致。

开发

• yarn dev

项目会根据packages中的文件夹内容动态读取页面文件夹个数提供用于使用者选择，最终生成多页应用开发环境。

构建

• yarn build

项目会根据packages中的文件夹内容动态读取页面文件夹个数提供用于使用者选择，最终构建生成多页应用生产包。

• yarn build-all

构建项目中所有应用。

更新日志

9.27

• 增加css-loader，针对css进行处理。

• dev模式下增加eslint-webpack-plugin检测并autofix代码。