create-react-app修改webpack配置
在 React 官⽹中描述了 create-react-app（以下称 CRA） 已经有⼀套完善的默认 webpack 配置，但如果在项⽬中需要⾃定义⼿动配置 CRA 默认的 webpack 配置有两种⽅案。
⽅案⼀：执⾏命令 npm run eject
在 Create React App 中提到了⼀条命令 npm run eject，但是讲明了这条命令是不可逆转的，并且还存在⼀些其他的缺点。
例如：CRA 是可以通过升级其中的 react-scripts 包来升级 CRA 的特性，⽐如⽤⽼版本 CRA 创建了⼀个项⽬，这个项⽬不具
备 PWA 功能，但只要项⽬升级了 react-scripts 包的版本就可以具备 PWA 的功能，项⽬本⾝的代码不需要做任何修改。但如果我们使⽤了 eject 命令，就再也享受不到 CRA 升级带来的好处了，因为 react-scripts 已经是以⽂件的形式存在于你的项⽬，⽽不是以包的形式，所以⽆法对其升级。
还有就是如果我们只需要修改极少的 webpack 配置也是没有必要使⽤ npm run eject ⽅法的。
因此，我个⼈是不推崇的这种⽅案的。
⽅案⼆：使⽤ react-app-rewired 和 customize-cra 来⾃定义create-react-app 的 webpack 配置。
使⽤ customize-cra 的好处就是可以不⽤执⾏ npm run eject ⽽进⾏修改 webpack 配置。我第⼀次看到 customize-cra 是
在Ant Design 中，下⾯就着重讲解⼀下如何使⽤。
步骤⼀、 安装依赖
npm i  c usto m ize-c ra rea c t-a pp-rew ired --dev
r a r ea
步骤⼆、修改根⽬录下 package.json ⽂件
2-1
ant安装包步骤三、在项⽬根⽬录下添加 config-overrides.js ⽂件。在该⽂件中配置webpack。
3-1
注意：步骤三中的只是⼀个⽤法⽰例，⾄于 override 中的其他API， 请参与 API doc，若要查看我的其他 ⽤法⽰例请参阅⽂章：在 create-react-app 中引⼊ Tailwind CSS。
参考⽹址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。