fork-ts-checker-webpack-plugin

`fork-ts-checker-webpack-plugin` 是一个 Webpack 插件，用于在 Webpack 构建期间执行 TypeScript 类型检查。它可以与 TypeScript 和 Webpack 集成，以提高构建性能和减少构建时间。它使用了 TypeScript 的类型检查器，将类型检查进程和 Webpack 构建进程分离开来，从而加快了构建速度。此外，它还可以与其他插件和工具集成，例如 `eslint-loader` 和 `babel-loader` 等。

相关问题

{ "name": "ts_base", "version": "1.0.0", "description": "", "main": "./src/index.ts", "scripts": { "start": "webpack-dev-server --mode development --config ./build/webpack.config.js", "build": "webpack --mode=production --config ./build/webpack.config.js", "lint": "eslint src --ext .js,.ts", "test": "jest" }, "keywords": [ "TypeScript" ], "author": "liangxiao", "license": "ISC", "devDependencies": { "@types/jest": "^24.0.15", "@types/jquery": "^3.3.29", "@types/source-map": "^0.5.2", "@typescript-eslint/eslint-plugin": "^1.10.2", "@typescript-eslint/parser": "^1.10.2", "awesome-typescript-loader": "^5.2.1", "clean-webpack-plugin": "^3.0.0", "eslint": "^5.16.0", "fork-ts-checker-webpack-plugin": "^1.3.7", "html-webpack-plugin": "^3.2.0", "jest": "^24.8.0", "ts-jest": "^24.0.2", "ts-loader": "^6.0.2", "typescript": "^3.5.1", "webpack": "^3.6.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^2.6.9", "webpack-merge": "^4.2.1" }, "dependencies": { "jquery": "^3.4.1", "moment": "^2.24.0" } }

根据你提供的`package.json`文件，可以看出你的项目依赖关系如下：

开发依赖项：
- `@types/jest`: 用于为Jest测试框架提供TypeScript类型定义。
- `@types/jquery`: 用于为jQuery库提供TypeScript类型定义。
- `@types/source-map`: 用于为source-map库提供TypeScript类型定义。
- `@typescript-eslint/eslint-plugin`: 用于在ESLint中使用TypeScript规则的插件。
- `@typescript-eslint/parser`: 用于解析TypeScript代码并生成抽象语法树（AST），供ESLint使用。
- `awesome-typescript-loader`: 用于Webpack中加载TypeScript文件。
- `clean-webpack-plugin`: 用于在每次构建之前清理输出目录。
- `eslint`: 用于进行代码规范检查。
- `fork-ts-checker-webpack-plugin`: 用于在Webpack构建过程中进行TypeScript类型检查。
- `html-webpack-plugin`: 用于生成HTML文件并自动引入打包后的资源。
- `jest`: 用于进行单元测试。
- `ts-jest`: 用于在Jest中解析和运行TypeScript代码。
- `ts-loader`: 用于Webpack中加载TypeScript文件。
- `typescript`: TypeScript编译器。
- `webpack`: 用于打包项目资源。
- `webpack-cli`: 用于在命令行中运行Webpack命令。
- `webpack-dev-server`: 用于在开发过程中提供一个开发服务器，支持热更新和自动刷新。
- `webpack-merge`: 用于合并多个Webpack配置文件。

生产依赖项：
- `jquery`: jQuery库。
- `moment`: 日期时间操作库。

根据你提供的信息，你的`npm start`命令应该是可以正常工作的。但是，记得在运行之前，先根据之前的回答中的建议，升级Node.js版本到npm支持的版本。

如果你遇到了其他问题，请提供错误信息或详细描述你的操作步骤，以便更好地帮助你解决问题。

@pmmmwh/react-refresh-webpack-plugin webpack 如何配置

要在 Webpack 中配置 `@pmmmwh/react-refresh-webpack-plugin` 插件，您需要进行以下步骤：

1. 首先，安装 `@pmmmwh/react-refresh-webpack-plugin` 插件和 `react-refresh` 包，可以使用 npm 或 yarn 命令进行安装：

   npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

或

   yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh --dev

2. 在 webpack 配置文件中，导入插件和 `ReactRefreshWebpackPlugin`：

   const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
   const ReactRefreshTypeScript = require('react-refresh-typescript');

3. 将 `ReactRefreshWebpackPlugin` 插件添加到 plugins 数组中：

   plugins: [
     new ReactRefreshWebpackPlugin()
   ],

4. 如果使用 TypeScript，需要添加 `ReactRefreshTypeScript` 到 ts-loader 的选项中：

   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: [
           'ts-loader',
           {
             loader: 'react-refresh-typescript',
             options: {
               // disable type checker - we will use it in fork plugin
               transpileOnly: true
             }
           }
         ],
         exclude: /node_modules/
       }
     ]
   },

5. 最后，在 devServer 中启用 `hot` 和 `hotOnly` 选项：

   devServer: {
     hot: true,
     hotOnly: true
   }

完成以上配置后，您可以在开发模式下使用 `@pmmmwh/react-refresh-webpack-plugin` 插件了。