CRA应用使用craco实现webpack配置+module.less+src别名配置+企业级路由配置等一系列基本配置

原创

已于 2024-11-30 19:04:39 修改 · 2.8k 阅读

于 2023-05-12 15:14:21 首次发布

文章介绍了如何使用craco来配置create-react-app(CRA)的webpack，避免使用eject命令。通过安装craco并修改package.json脚本，以及创建craco.config.js文件进行别名、less和代码混淆等配置，实现对CRA的自定义设置。

前言：总所周知，create-react-app 是目前最受欢迎的创建 React 应用的手脚架之一，下面简称CRA；CRA 最推荐更改 webpack 配置的当属使用 craco。craco 的全称是 Create React App Configuration Override。它是一个社区维护的工具，允许你在不使用 eject 命令的情况下自定义 create-react-app (CRA) 的配置。通过 craco，你可以轻松地覆盖和扩展 CRA 的默认配置。下面我们一起来看看配置吧。

下面演示用到的某些重要库的版本

node：18.20.2
react：^18.3.1
react-activation：^0.13.0
@craco/craco： ^7.1.0
react-router-dom：6.3.0
@loadable/component：^5.16.4

一、创建 cra 应用

npx create-react-app my-app --template typescript
cd my-app
npm start

二、安装和配置 craco

为什么使用 craco（Create React App Configuration Override）
使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的，不像vue-cli那样可以通过一个配置文件修改。
虽然有一个eject 命令可以是将配置完全暴露出来，但这是一个不可逆的操作，同时也会失去CRA带来的便利和后续升级。
如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式

通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包

使用 react-app-rewired + customize-cra 组合覆盖配置

使用 craco 覆盖配置

1. 安装 craco

yarn add @craco/craco

或者

npm i @craco/craco

2. 修改pacage.json中的启动脚本命令，找到 pacage.json 文件的 scripts 项修改

  "scripts": {
   
   
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3. 在项目根目录创建craco.config.js配置文件【这里的配置包括下面用到的，以及代码混淆配置，打包输出的一些简单配置等，仅供参考】

安装样式重置库：yarn add normalize.css
安装 router：yarn add react-router-dom
安装react keep-alive相关库：yarn add react-activation
安装页面按需加载库：yarn add @loadable/component
安装调试控制台：yarn add vconsole
安装代码混淆：yarn add javascript-obfuscator webpack-obfuscator --dev
安装用于分析和可视化webpack打包后的输出文件‌（如有需要）：yarn add -D webpack-bundle-analyzer
安装实现设计稿的比例和单位转换库（如用H5页面）：yarn add postcss-px-to-viewport

笔记：

yarn add <库名>@version 时，--dev 和 -D 参数都是只安装到 development 环境；

npm install <库名>@version 时，--save-dev 和 -D 参数都是只安装到 development 环境；

如果安装到 development 环境，yarn 和 npm 只记得用 -D 即可；

npm 的 install 可以用简略的 i 代替；

npm 和 yarn 添加库的时候，不添加额外参数，默认是会添加到 production环境；

npm 全局安装都是添加 -g，yarn 全局安装都是添加 global

npm 卸载某库 npm uninstall <库名>，yarn 卸载某库 yarn remove <库名>

对于 npm 卸载某库 npm uninstall <库名>：无额外参数时，卸载指定的包，‌但不会在package.json中删除对应信息；加 --save‌，卸载指定的包，‌并同时删除package.json中dependencies下的对应信息；加 --save-dev‌，卸载指定的包，‌并同时删除package.json中devDependencies下的对应信息。

以下是较完整的 `craco.config.js` 配置内容，包括下面将要配置的部分内容

const path = require("path");
const addPath = (dir) => path.join(__dirname, dir);
const {
   
    name } = require("./package.json");
const {
   
    whenProd } = require("@craco/craco");
/**
 * webpack-bundle-analyzer是一个webpack插件，‌用于分析和可视化webpack打包后的输出文件
 */
const {
   
    BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
/**
 * 允许在React项目中无缝集成和使用Less作为样式预处理器，如实现 module.less 进行样式模块隔离，避免样式污染
 */
const CracoLessPlugin = require("craco-less");
/**
 * webpack-obfuscator是一个用于混淆Webpack打包后的JavaScript代码的插件，旨在保护代码的知识产权和业务逻辑‌。‌
 * 它通过一系列技术手段，‌如变量重命名、‌字符串加密、‌控制流扁平化等，‌使原始代码变得难以阅读和理解。‌
 * 这样，‌即使代码被部署到生产环境，‌也能有效防止恶意用户或竞争对手轻易理解和解析代码中的敏感内容，‌从而提高代码的安全性
 */
const WebpackObfuscator = require("webpack-obfuscator");
/**
 * postcss-px-to-viewport是一个PostCSS插件，‌
 * 主要用于将CSS中的像素单位(px)转换为视口单位(vw、‌vh等)，‌实现设计稿的比例和单位转换
 * 以增强网页在不同设备和屏幕尺寸上的适应性
 */
const postcssPxToViewport = require("postcss-px-to-viewport");

const PORT = 9000;
let HOST = "127.0.0.1";
const publicPath = {
   
   
  development: `http://${
     
     HOST}:${
     
     PORT}`,
  production: `https://xxxxx/${
     
     name}`,
};

module.exports = {
   
   
  devServer: {
   
   
    port: PORT,
    client: {
   
   
      webSocketURL: {
   
   
        hostname: HOST,
      },
    },
  },
  webpack: {
   
   
    alias: {
   
   
      "@": addPath("src"),
    },
    configure: {
   
   
      output: {
   
   
        publicPath