cra-template-enable-config v0.1.0

Getting Started with cra-template-playground

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.

yarn build

编译打包线上测试版, 对应配置文件为 .env.dev, 输出目录为 build

yarn build:prod

编译打包线上正式版, 去除 console 输出以及不生成 sitemap 文件, 对应配置文件为 .env.prod, 输出目录为 dist

yarn analyze

分析打包后的 build 目录包体积

yarn build:analyze

集成的依赖

react

官网

create-react-app

官网

react-router-dom

官网

craco

无需 eject 可以自定义 webpack、babel 等配置

配置文件 craco.config.js

gihub

参考

terser-webpack-plugin

uglify 替代方案

代码压缩以及线上版本去 console

gihub

dotenv-cli

生成自定义配置环境 本实例 .env.dev .env.prod

gihub

source-map-explorer

顾名思义

gihub

WebpackBar

编译进度条

gihub

circular-dependency-plugi

gihub

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify