craco 配置指南

• create-react-app创建项目默认无法修改 webpack 配置(不用 eject)，但是可以使用craco来修改 webpack 配置。craco

项目搭建

• 使用create-react-app创建项目

npx create-react-app craco-demo --template typescript

• 安装craco

npm install @craco/craco --save-dev
# or
yarn add @craco/craco --dev
# or
pnpm add @craco/craco --save-dev

• 根目录创建craco.config.js文件

const path = require('path')
const { name } = require('./package.json')

const pathResolve = (pathUrl) => path.join(__dirname, pathUrl)

module.exports = {
  reactScriptsVersion: 'react-scripts' /* (default value) */,
  webpack: {
    alias: {
      '@': pathResolve('src'),
      '@assets': pathResolve('src/assets'),
      '@components': pathResolve('src/components'),
      '@constants': pathResolve('src/constants'),
      '@containers': pathResolve('src/containers'),
      '@hooks': pathResolve('src/hooks'),
      '@mocks': pathResolve('src/mocks'),
      '@routes': pathResolve('src/routes'),
      '@services': pathResolve('src/services'),
      '@styles': pathResolve('src/styles'),
      '@types': pathResolve('src/types'),
      '@utils': pathResolve('src/utils'),
      '@contexts': pathResolve('src/contexts'),
    },
    configure(webpackConfig) {
      // 配置扩展扩展名
      webpackConfig.resolve.extensions = [
        ...webpackConfig.resolve.extensions,
        ...['.scss', '.css'],
      ]
      // 接入微前端框架qiankun的配置,不接入微前端可以不需要
      webpackConfig.output.library = `${name}-[name]`
      webpackConfig.output.libraryTarget = 'umd'
      webpackConfig.output.globalObject = 'window'
      return webpackConfig
    },
  },
  devServer: {
    // 本地服务的端口号
    port: 3001,
    // 本地服务的响应头设置
    headers: {
      // 允许跨域
      'Access-Control-Allow-Origin': '*',
    },
  },
}

• 修改package.json中的scripts命令

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

参考资料

• craco 官网
• 基于 craco 配置的 react 项目的 webpack 构建优化
• 万字长文详解 react 项目使用 craco 进行配置并集成 Prettier、Eslint、husky、lint-staged
• React 项目使用 craco（由 create-react-app 创建项目）