美文网首页webpack那些事React那些事
create-react-app 修改 webpack 配置体验

create-react-app 修改 webpack 配置体验

作者: _静夜听雨_ | 来源:发表于2021-12-28 10:10 被阅读0次

    作为前端开发,基本会使用CRA创建react项目,但是你会发现,webpack是被隐藏的,如果说我们想添加配置,该如何操作呢?

    第一种方案: 执行命令 :npm run eject

    我们知道,这个命令不不可逆的,就是执行后,你回不去了...
    还有就是如果我们只需要修改极少的 webpack 配置也是没有必要使用,
    实际上react已经主动加入了很多我们经常用到的东西,比如:babel编译,sass以及一些常用的插件。
    建议是你发现问题的时候,再去额外进行添加。

    第二种方案:使用 react-app-rewired和customize-cra来自定义 create-react-app 的 webpack 配置。

    使用customize-cra 的好处就是可以不用执行npm run eject而进行修改 webpack 配置。

    步骤一、 安装依赖
    npm i customize-cra react-app-rewired --dev

    步骤二、修改根目录下 package.json 文件

    image

    步骤三、在项目根目录下添加 config-overrides.js 文件。在该文件中配置 webpack。

    image

    注意:步骤三中的只是一个用法示例,至于 override 中的其他API, 请参与 API doc,若要查看我的其他 用法示例请参阅文章:在 create-react-app 中引入 Tailwind CSS

    相关文章

      网友评论

        本文标题:create-react-app 修改 webpack 配置体验

        本文链接:https://www.haomeiwen.com/subject/zbkvqrtx.html