如何在带有Lerna和Yarn工作区的Typescript monorepo中启用热重新加载？

在带有Lerna和Yarn工作区的Typescript monorepo中启用热重新加载，可以按照以下步骤进行操作：

确保你的monorepo项目中已经安装了Lerna和Yarn，并且已经配置好了Typescript。
在根目录下创建一个名为.env的文件，并在其中添加以下内容：

FAST_REFRESH=true

这将启用热重新加载。

在根目录下的package.json文件中，添加以下配置：

"scripts": {
  "start": "lerna run start --stream",
  "dev": "lerna run dev --stream"
},
"devDependencies": {
  "concurrently": "^6.0.0"
}

这将配置启动和开发脚本，并安装concurrently依赖。

在根目录下创建一个名为tsconfig.json的文件，并添加以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@your-package-name/*": ["packages/*/src"]
    }
  },
  "include": ["packages/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

将@your-package-name替换为你的包名。

在根目录下创建一个名为webpack.config.js的文件，并添加以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './packages/your-package-name/src/index.ts',
  output: {
    path: path.resolve(__dirname, 'packages/your-package-name/dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

将your-package-name替换为你的包名。

在每个包的目录下创建一个名为webpack.config.js的文件，并添加以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

在每个包的目录下的package.json文件中，添加以下配置：

"scripts": {
  "start": "webpack serve --config webpack.config.js --hot",
  "dev": "webpack --config webpack.config.js --watch"
},
"devDependencies": {
  "webpack": "^5.50.0",
  "webpack-cli": "^4.8.0",
  "webpack-dev-server": "^4.0.0",
  "ts-loader": "^9.2.6",
  "typescript": "^4.4.2"
}