create-react-app创建项目并对cra兼webpack二次配置详解

最新推荐文章于 2024-06-20 14:48:19 发布

Mr.温m_

最新推荐文章于 2024-06-20 14:48:19 发布

阅读量1.1k

点赞数 3

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_44216510/article/details/104418010

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用react脚手架create-react-app创建项目

可全局安装react脚手架但不推荐（版本会时有更新）
推荐使用npx安装

//全局安装create-react-app创建项目
yarn global add create-react-app
create-react-app my-app

//使用npx安装
npx create-react-app my-app

cd my-app
npm start

react项目此时就已经创建在工作目录下

然后进入我们的react项目进行搭建环境的二次配置，我们的二次配置使用的是customize-cra
详情可参看github官方 https://github.com/arackaf/customize-cra

安装customize-cra及原项目react-app-rewired

//支持webpack4+
yarn add customize-cra react-app-rewired -D

安装完成之后在项目根目录创建文件config-overrides.js来进行cra的二次配置

注意，所有的对webpack进行二次配置的内容必须添加在该文件内

举一个官网的例子

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias,
  adjustWorkbox
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(),

  // disable eslint in webpack
  disableEsLint(),

  // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

  // add an alias for "ag-grid-react" imports
  addWebpackAlias({
    ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
  }),

  // adjust the underlying workbox
  adjustWorkbox(wb =>
    Object.assign(wb, {
      skipWaiting: true,
      exclude: (wb.exclude || []).concat("index.html")
    })
  )
);