Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
嗯,翻译一下:
create-react-app是一个官方提供的新的用来创建单页应用的方法,它提供了一个没有配置的现代化构建的工具.
详细链接:https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
最近在重构一个react项目,也是我第一个的react项目,虽然对于webpack不是非常熟悉.但是利用create-react-app我很快搭建出来了自己的项目.但是其中因为不熟悉,踩了很多坑,所以这次重构,决定要通过create-react-app来深入了解webpack,并且记录下来.
创建一个webpack的项目
如何用create-react-app构建一个webpack的项目就不多说了.
npm install -g create-react-app
//切记项目名称不能大写
create-react-app firstapp
cd firstapp
npm run start
查看create-react-app的配置文件
创建完一个项目之后,你会发现为什么没有配置文件呢.
这是需要运行
npm run eject复制出相关的配置文件 so,why is that?
来看一下官方的文档,
看了这两段,我们首先可以看出来 npm run eject 是一个'一次性操作',只能使用一次.
那为什么官方要这么做,还是最后一句话能够体现.
We expect that at early stages, many people will “eject” for one reason or another, but as we learn from them, we will make the default setup more and more compelling while still providing no configuration.
总结就两个词,自信,牛逼.
package.json
先不看配置目录,先看看create-react-app 构建出来的项目用了哪些依赖.
"dependencies": {
//一个为了兼容浏览器,为样式自动添加前缀的库
"autoprefixer": "7.1.2",
//babel es6->es5
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
//对于这个插件不是很了解，简单看了一下文档，应该是为了兼容引入插件时的路径问题。
"case-sensitive-paths-webpack-plugin": "2.1.1",
//for console
"chalk": "1.1.3",
//css引入插件,将css装载到JavaScript例如 import './index.css'
"css-loader": "0.28.4",
//env 处理
"dotenv": "4.0.0",
//当你运行或者构建的时候，可以检查语法的库。我只能说这个库非常有用，毕竟有时候除了error致命，warning也非常致命（如果你不注意的话）
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
//css 打包插件
"extract-text-webpack-plugin": "3.0.0",
//文件加载打包插件包括图片，js文件等
"file-loader": "0.11.2",
//文件系统扩展模块
"fs-extra": "3.0.1",
//html生成插件，可以自动引入css和js
"html-webpack-plugin": "2.29.0",
//单元测试工具
"jest": "20.0.4",
//目测应该是Object.assign()的兼容库---不懂。。。
"object-assign": "4.1.1",
//一种用于修复flexbug的bug的插件。
"postcss-flexbugs-fixes": "3.2.0",
//css构建中，浏览器兼容库
"postcss-loader": "2.0.6",
//promise库
"promise": "8.0.1",
//内置react相关库
"react": "^15.6.1",
"react-dev-utils": "^4.0.1",
"react-dom": "^15.6.1",
//样式加载库，使JavaScript认识css
"style-loader": "0.18.2",
//不是很了解，搜了一下应该提供一种web前端的缓存方案的库
"sw-precache-webpack-plugin": "0.11.4",
//css和dom属性中 的各种文件引入
"url-loader": "0.5.9",
//webpack
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
//fetch 请求，一种更加优雅异步加载的请求方式
"whatwg-fetch": "2.0.3"
},
config目录简单解析
--env.js
返回客户端的环境配置
--paths.js
返回各种项目关键的目录位置
--polufills.js
引入promise，fetch，object.assign三种常用方法。
--webpack.config.dev.js
webpack开发环境配置文件
--webpack.config.prod.js
webpack生产环境配置文件
--webpackDevServer.config.js
小型的Node.js Express服务器
一边写代码，一边写文章，时间仓促，有什么地方写的不对的地方的，请指出。第二篇中，我们将深入了解config中的各个配置文件。
