webpack-builder-react-xd/README.MD

小盾安全前端团队构建器

# 介绍

## @td/webpack-builder-react-xd 小盾安全前端团队 构建器

### 特性

- 基于webpack5、babel7开发
- 集成了 TypeScript构建、webpack-dev-server支持、热更新、最新的babel配置(支持到es2020)

- 不需要改动之前已有的代码，轻松接入
- 目前支持 `dev`、`build` 两个常用构建指令
- 支持微前端构建，支持微前端单文件打包构建，支持统一入口打包构建
- package.json 负担减轻
- 提高开发效率、提示团队前端工程化能力
- 支持通过config-overrieds 文件去添加 webpack 配置

# 安装

```js
npm install --save-dev @td/webpack-builder-react-xd
```

# 使用

## package.json 配置

### builder-config

这个配置告知构建器，你要使用什么方式去构建项目

```json
"builder-config": {
  "typescript": false,
  "entry": "SPA",
},
```

| Parameter      | Description                  | Type    | Optional Value | Default |
| -------------- | ---------------------------- | ------- | -------------- | ------- |
| devPublicPath  | 开发环境publicPath           | string  | --             | '/'     |
| prodPublicPath | 生产环境publicPath           | string  | --             | '/'     |
| typescript     | 是否开启ts构建               | boolean | --             | false   |
| entry          | 项目入口 是单入口 还是多入口 | String  | 'SPA','MPA'    | 'SPA'   |

### npm scripts 

```jso
"dev": "webpack-builder-react-xd dev",
"build": "webpack-builder-react-xd build",
```

| Parameter    | Description                                                  | Type   | Optional Value     | Default     |
| ------------ | ------------------------------------------------------------ | ------ | ------------------ | ----------- |
| dev          | 开发 指令                                                    | string | dev                | dev         |
| build        | 构建 指令                                                    | string | build              | build       |
| profile      | 是否开启 profile 分析                                        | string | --profile          | none        |
| micro        | 是否是微前端构建                                             | string | --micro            | none        |
| micro-single | 微前端单文件构建(这个参数必须在作为--micro 参数的下一个参数)，默认是 统一入口构建 | string | pages/**folderName | none        |

> 注意：如果是微前端构建的情况下
>
> "build": "npm run clean && webpack-builder-react-xd build --stats --micro", -- micro后面只允许再传入一个参数（单文件构建名字），其他参数请放在--micro前面

## Template 配置

### config-overrides.js

现在项目中必须在根目录 添加 `config-overrieds.js`，它可以让你添加webpack配置，哪怕你不需要也要返回config对象

> 在你不清楚的情况下  你最好只添加externals和devServer的配置，其他配置的已经内置好
>
> alais别名: 已经动态读取了src下的目录，eg: src: src; components: components。文件夹名字是什么 别名就是什么

```js
module.exports = function(config) {
  config.externals = {};
  config.devServer = {};
  return config;
};
```

### SPA入口项目

单入口页面: 入口文件`index.ts` / `index.js `必须放在src文件夹根目录下

静态模板html: 项目根目录下创建 `example`文件夹，并在example下创建`index.html` 作为静态模板html

### MPA入口项目

多入口页面: 参照之前项目(aif-tool下面的方式)，src/pages/**