问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
klim
    4181894

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

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

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

    Microsoft前端typescriptreactwebpack
    阅读 1.3k
    avatarAI BotBETA

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

    例如：

    "scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  // ... 其他脚本
}
    1. 在 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 项目。

    1 个回答
    得票最新
    头像头饰
    Meathill
      22.2k123642

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

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

      查看全部 1 个回答
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏