共计 1636 个字符，预计需要花费 5 分钟才能阅读完成。
前面两篇文都只是铺垫，今天至少要实现一个简单 react 的 hello word
开始之前再说一下垫片和 presets。前几天突发疑问，create-react-app 是怎么做的垫片，因为很多语法或者 API 不一定兼容所有浏览器，所以需要有垫片 (polyfill) 去帮我们做兼容。我一开始以为会在 entry 引入 @babel/polyfill，但并不是。而是引入了一个 babel-preset-react-app。如果有自己写 webpack 配置的经验，应该明白我们配置 babel 的时候，引入了许多的 preset 和一些 plugins，比如 @babel/preset-env,@babel/preset-react, @babel/plugin-proposal-object-rest-spread(支持对象展开符) @babel/plugin-syntax-dynamic-import（支持异步 import 语法）等等，还有很多。但是这个 presets 集合了很多很多 preset，这样我们就没必要分别引入了。
可以看到这个 preset 里面还有 @babel/runtime 这个就是垫片库了，结合这个 @babel/plugin-transform-runtime 可以做到按需加载垫片库，具体和 @babel/polyfill 的差别就不说了，自己去查询文章。
参考 create-react-app，我简化了他的 N 多目录和结构，去掉了很多的兼容拓展。当然先只是简单实现了一个类似于 npm run start。
这是我的 index.js，当然以后会拆出来，作为 bin 目录下的一个执行文件。cli-view
当执行 node ./src/cs.js, 就会进行打包构建了。
会自动打开默认浏览器
简单说下三个文件 webpackConfig，devServerConfig，config。当然了应为还只是最初版本，很多细节功能压根没有。
先说下 config.js
这个就是单纯的 cache 一些环境配置，当然我仍然依赖了一下 webpack.config.js，其实这个是纯粹一个暴露在项目中的配置文件，它也可以叫其他名字例如 app.config.js 之类的。
里面就配置了一个 entry。create-react-app 貌似默认去的就是 src 下的 index.jsx，其实我们也可以这样玩，但我觉得暴露个 entry 的入口配置，灵活性更高点。毕竟我们还可以玩多页面。至于到底怎么整，大家可以自己取舍。
createWebpack.js 里面就是我们平常看到的配置文件了。
这里有几个细节要提一下，1 比如写配置 loader 的时候，我一开始直接 babel-loader，报错找不到 babel-loader, 我估摸着是它的逻辑是走到了项目目录下去找了，而我的项目目录没有安装这个，所以我按照 create-react-app 的来，加上了 require.resove，估计走的就是脚手架的 node_modules 去找 babel-loader，就没报错了。2 babel 的 presets 我也直接用的是 babel-preset-react-app（其实就是几个 preset 的集合）3 写脚手架的时候稍微注意下目录，别搞混了，比如 process.cwd()，__dirname 之类的。
createDevServer 就最简单了，就是一个简单的 serve 配置了。但后续应该还要加上代理之类的。因为现在自己手上的项目都是引入了 node，用不到 webpack-dev-server。我估计用这个调用后台接口的时候，要么自己起 nginx 项目做转发，不然就在这里设置 proxy。不然跨域。
虽然看起来简单，但真正自己敲着代码来，还是会发现好多细节问题。因为功能还非常不完整，比如 css, 热加载都还没有就暂时不放到 git 上了。但下一期完善功能就放上去。
下一期争取做到
1 完善各种 webpack 基本配置
2 hot 热加载
3 试着 push 到 npm 包管理，通过 npm run start 来启动项目。