creact-react-app创建项目生成的目录结构
React脚手架 creact-react-app 它是由node编写,基于Webpack的。 脚手架搭建React项目，它的目录结构是这样的
既然基于Webpack，为什么这个目录结构中没有Webpack的相关配置呢？
因为脚手架将Wabpack的相关配置都进行了隐藏，尽量不要暴露出来，但需要学习或修改相关配置可以将其显示出来，不过这个操作是不可逆的。 那么如何暴露出Webpack的配置文件呢？
暴露出Webpack的相关配置
效果图： 多了config、scripts这两个文件
操作步骤：
- git init
- git add --all
- git commit -m 'xxx' (这个xxx 是可任意的)
- 再运行暴露命令 npm run eject 然后会询问 ：Are you sure you want to eject? This action is permanent. 输入 y 注意：一旦运行暴露命令，将不可逆（不可再次隐藏webpack配置文件）
Wabpack配置文件的详细信息
config文件：
scripts文件：
scripts/start.js
端口配置：
// Tools like Cloud9 rely on this.默认3000 可修改端口
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
生产所需：
// 在这里生产webpack本地服务所需要的配置文件
const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
设置代理
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(
proxySetting,
paths.appPublic,
paths.publicUrlOrPath
);
项目自启动
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
config/webpack.config.js
默认支持sass,但需要安装sass编译器
区分生产环境和开发环境
config/paths.js 项目打包
修改入口文件
指定入口文件和出口文件，可在paths.js中修改
config/webpackDevServer.config
配置代理
