特殊说明

开始之前，需要先声明一些点

1. 由于主要是借助module federation的能力，所以，构建工具肯定有且仅有一个选择webpack。所以，vite党可以先划走

   有一种方案，是可以使用vite的，即 开发环境 使用 vite ，生产环境用 webpack。事实上，我们之前项目中，就是采用了这种方案。

   另外字节出品的rspack兼容webpack的配置，且也是能支持module federation的能力的。

2. 多年以前，我刚接触vue的时候，当时配套的脚手架工具还是vue-cli。当时的感觉就是，vue-cli太牛逼了。这个项目的结构会尝试效仿当时vue-cli所生成的代码目录。

3. 示例代码会托管在gitee上，并且在 package.json 中，把所有依赖会进行版本锁定，以确保代码 pull 下来，安装上依赖就可以直接跑。

4. 每一篇内容会在代码仓库里，每一步都会有对应的分支，以供查看代码。

   gitee.com/z-dennis/mi…

闲言少叙，开始

Webpack + react + ts 项目搭建

项目伊始

目录结构

├── build
│   └── webpack.config.js
├── config
│   └── index.js
├── index.html
├── package.json
├── src
│   ├── app.tsx
│   └── index.tsx
└── tsconfig.json

代码

gitee.com/z-dennis/mi…

理论上，这个项目最基本的架子已经搭建好，安装完依赖，在命令行运行 npm run dev 就可以把这个项目跑起来。

当然，这还远远不够。

按环境区分webpack打包配置

本地开发环境和打包环境的 webpack 配置，是不一样的，需要进行区分。

在build目录下创建不同的配置文件。其中webpack.config.dev.js用于本地开发 。 webpack.config.dev.js用于生产打包。

目录结构

├── build
│   ├── build.js
│   ├── webpack.config.base.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── config
│   └── index.js
├── index.html
├── package.json
├── src
│   ├── app.tsx
│   └── index.tsx
└── tsconfig.json

代码

gitee.com/z-dennis/mi…

处理样式

由于我比较喜欢scss，所以，就用了scss作为预编译处理器了，同时开启了css module

目录结构

├── build
│   ├── build.js
│   ├── webpack.config.base.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── config
│   └── index.js
├── index.html
├── package.json
├── src
│   ├── app.tsx
│   ├── customer.d.ts
│   ├── index.tsx
│   ├── style.css
│   └── style.scss
└── tsconfig.json

代码

gitee.com/z-dennis/mi…