/pages

🚀 工程化多页面应用打包配置模版

Primary LanguageJavaScript

Pages PRs Welcome

Logo

基于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代码。