记录第一次创建react新项目后，按需求修改目录结构到成功访问

react

最近正在写一个react的小项目练手。本文主要讲述放弃默认的目录结构，如何帮助自由使用组件加载目录和定义项目入口。

create-react-app [app-name]

cd [app-name]

npm run start

目录结构大致为如下，红色框为开发者主要会操作到的几个目录。

因为自己写项目肯定有不少新的模板和组件文件生成，我们要确定一个自己的目录结构，我暂定按角色类型来分，在基础目录上创建了component目录放组件，src放index.html和index.js，这时App.js就要移到component下面了。

因为react默认使用src目录作用组件的加载目录，我们要自由创建并指定项目按我们创建的目录访问，需要更改config设置。

npm run eject

运行成功后，刷新目录就会出现config配置项

就删掉提示文件所在目录的.git目录（进资源管理器找，编辑器可能是看不到的），再npm tun eject

接下来

config/webpack.config.js是webpack打包的配置，从当前配置的默认值看到，有两个位置都用到了src目录。

上面还有一个test-loader：eslint-loader据说是预检（pre）语法错误的。

关于include的用法，就是资源加载的目录。官网传送门

上面paths.appSrc是定义在paths文件中定义的变量

知道这些目录和文件的作用后，你就可以自由定义位置了。

在paths.js文件的module.exports对象中添加这两行

appComponent:resolveApp(‘component’) //放组件的

appHtml: resolveApp(‘src/index.html’) //换了index.html的位置

然后修改两个位置include的值由字符串=> 字符串数组

include: [paths.appSrc, paths.appComponent]

现在index.js和App.js不在一个目录了，引入方式就变成了这样

import App from '…/component/App’

（上面两个相对地址是两个点点，编辑器显示成了三个点点）

当新建项目遇到报build eror：unexpexted token < 时，就要先检查文件加载的问题。

还有如果你不想在webpack.config.js本文件内修改，想创建自己的副本

就修改scripts目录下的start.js调用的文件。