目标

打包工具

webpack 和 vite 统统都要，主应用采用webpack，部分子应用采用vite ts-lodaer，babel-loader和esbuilder 全部整齐。

微前端

qiankun、micro-app和 webpack mf 以及 vite mf。

语言

ts + sass

要求

1. 所有子应用均支持本地单独部署
2. 支持CICD，githubpage和gitee自动发布，且能支持自动感知
3. http模块需要抽离到公共库，公共库内容支持开发调试。
4. monoRepo，pnpm
5. 有代码守护，支持CDN

初始化项目目录

1. pnpm init 生成package.json
2. 创建packages目录，创建pnpm-workspace.yaml,配置如下

packages:
    - "packages/*"

3. 在packages中新建各个子应用，package.json中的name作为应用名称

host应用webpack配置

env.js 和 constant.js 配置

通过配置dot文件，可以把一些自定义的环境变量注入到打包的流程中，不需要再使用cross-env工具。 dotenv包和dotenv-expand， 前者用于读取dot文件中的变量后者用于合并扩展env。 dot文件参考vue-cli的实现，命令行 > 系统自带 > .env.[mode].local > .env.[mode] > .env.local > .env webpack.config.js 通过导出函数返回配置可以获取命令行参数，webpack --config webpack.config.js --mode development。通过不同的mode，先初始化环境变量

// webpack.config.js
modulex.exports = (env, arg) => {
    const mode = arg.mode || 'production';
    loadEnv(mode); // 加载环境变量
    const config = require(`${mode}.config.js`)
    return config;
}

constant.js 用于定义一些webpack配置中需要的常量。

webpack-merge处理不同mode的config。

通过webpack-merge库实现webpack.config.js的合并。

const { merge } = require('webpack-merge');
const baseConfig = require('./base.config.js');
module.exports = merge(baseConfig, {
    // ...
})

context、entry和extensions

{
    // context: path.resolve(),  // 绝对路径
    entry: {
        main: './src/index'  // ./开头
    },
    resolve: {
        extensions: ['.vue', '.ts', '.js'] // 常用的写在前面 对entry同样生效，因为entry本质是虚拟一个新文件。
    }
}

output

development和production区别不同，development需要方便调试。

// development.config.js
{
    output: {
        path: path.resolve('dist'),  // 输出文件目录
        filename: '[name].js'  // 生产环境采用添加chunkhash配置
        chunkFilename: '[name].chunk.js'  // 生产环境 添加 contenthash
        clean: true,  // 每次build均删除dist
        uniqueName: process.env.APP_NAME // 注意每个应用加载的变量的需要不一样，而且不能被覆盖。
    }
}

alias和tsconfig.json中的paths

使用js文件将tsconfig.json中的compilerOptions.paths和webpack中的别名对应起来，避免重复修改。两处格式不同需要做一些转换。配置tsconfig.js 两个作用。一是对ts-loader、babel-loader(ts)、esbuild-loader生效，这几个loader在处理时会忽略部分配置。二是部分编辑插件会根据配置项处理路径补全，错误提示等信息。

{
  "compilerOptions": {
    "target": "esnext",  // ts-loader 编译代码目标，总是设置为esnext，表示ts不处理高级语言，交给babel处理
    "module": "esnext",  // 针对import 语句的处理，esnext 不处理 import 语句等。交给webpack或者rollup处理
    "strict": true,   // 严格模式
    "jsx": "preserve",  // preserve 表示支持jsx但不不处理（交给babel处理），如果设置为none表示不支持jsx。
    "moduleResolution": "node",  // module解决方案
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".", // paths路径补全基于baseUrl
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [    // 能够使用的全局变量
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

devServer配置

资源配置

public 和 assets

public表示需要被直接拷贝到生成目录下的文件夹，代码中引用时通过./public/xx 的方式， assets 是项目中依赖的资源，会经过webpack loader处理。vue会把除了绝对路径的资源都交给webpack处理，导致没办法对public文件使用相对路径。项目规定如下

1. public全部使用相对路径，template中通过修改属性值为首字母大写可以跳过vue-compiler处理，style中css-loader 通过options.url.filter 添加自定义函数，less和sass loader 建议不处理资源，都交给css-loader 处理
2. assets相对路径和绝对路径均可，建议使用别名。