前端 - 想要在现有的react + typescript项目内使用webpack，请问我需要如何做才能配置好使用它呢？

Question

我使用了npx创建了react + typescript的测试项目：

npx create-react-app your-app --template typescript

然后，我想要在现有的项目内使用webpack，请问我需要如何做才能配置好使用它呢？

Answer 1

没记错的话，react 模版项目里面的脚手架就是 webpack，所以你不需要再搞什么。

反而可以接着这个项目来学习 webpack。

Answer 2

在由 create-react-app 生成的 React + TypeScript 项目中，Webpack 已经被内置并配置好了。但如果你想要自定义 Webpack 配置，你需要执行一些步骤来“eject”配置或者通过特定的插件（如 react-app-rewired）来扩展配置。

方法一：Eject Webpack 配置

你可以通过运行以下命令来“eject”Webpack配置：

npm run eject

注意：这将会把你的项目从 create-react-app 的控制中解脱出来，并生成所有的配置文件（包括 Webpack 的配置文件）。一旦你执行了 eject，你就不能再回到使用 create-react-app 的脚本进行更新和管理的状态了。所以，请确保你真的需要自定义配置，并且愿意承担维护这些配置的责任。

方法二：使用 react-app-rewired

如果你不想 eject 现有的配置，你可以使用 react-app-rewired 这个包来覆盖默认配置。

1. 首先，安装 react-app-rewired：

npm install react-app-rewired --save-dev

2. 在你的项目根目录下创建一个名为 config-overrides.js 的文件。这个文件将包含你想要覆盖或扩展的 Webpack 配置。
3. 修改 package.json 中的脚本，将 react-scripts 的调用替换为 react-app-rewired。

例如：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  // ... 其他脚本
}

4. 在 config-overrides.js 文件中，你可以通过调用 override 函数并返回一个包含自定义配置的对象来扩展 Webpack 配置。

例如：

// config-overrides.js
module.exports = function override(config, env) {
  // 扩展或覆盖 Webpack 配置
  // ...
  return config;
};

方法三：使用自定义的 Webpack 配置文件

如果你完全不想使用 create-react-app 的内置配置，你可以从头开始配置一个 Webpack 项目，但这通常意味着你将失去 create-react-app 提供的所有默认设置和脚本。这通常不是一个推荐的做法，除非你有一个非常特定的需求或者你非常熟悉 Webpack 的配置。

总结

对于大多数情况，使用 react-app-rewired 是扩展 create-react-app 生成的项目的 Webpack 配置的最佳选择。这允许你在不丢失原始配置的情况下添加自定义配置。如果你确实需要完全控制 Webpack 配置，那么你可能需要考虑从头开始配置一个新的 Webpack 项目。