Webpack5 React Scripts

👨‍🏫 描述

• uc-react-scripts 主要解决基于create-react-app的项目，快速升级Webpack 5使用

🙋‍♂️ 快速开始

• 初始化 CMA 项目： npx @jkyu/create-monet-app init

📦 安装

npm i -g @jkyu/create-monet-app or yarn global add @jkyu/create-monet-app

👨‍🔧 功能迭代

更新文档

👨‍💻 指令

• uc-react-scripts info 查看当前运行环境
• uc-react-scripts dev 调试
  • uc-react-scripts dev --env test 运行环境
  • uc-react-scripts dev --verbose 关闭webpack错误或警告信息 默认为 false
• uc-react-scripts build 构建
  • uc-react-scripts build --env test 指定 部署环境
• uc-react-scripts help

🧑‍💻 如何使用uc-react-scripts项目

1) 安装 react-app-rewired

$ npm install @jkyu/uc-react-scripts --save-dev

2) 在根目录中创建一个 mjd-config-overrides.js 文件

/* mjd-config-overrides.js */
module.exports = {
  webpack: (config, env) => config,
  devServer: (configFunction) =>{
    return function(proxy, allowedHost) {
      // configFunction --> dev config
      return configFunction(proxy, allowedHost);
    };
  },
  paths:(paths, env) => paths,
  custom: {}, // 根据webpack结构，对配置进行覆盖
  override: (config) => config // 根据已经生成的config，进行修改
};

+-- your-project
|   +-- mjd-config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

3) 替换 package.json 中 scripts 执行部分

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "uc-react-scripts dev",
-   "build": "react-scripts build",
+   "build": "uc-react-scripts build",
}

4) 启动 Dev Server

$ npm start

5) 构建你的应用程序

$ npm run build