- 配置webpack
- npm init （npm init -y(跳过所有问题)）
- npm i webpack && webpack-cli -D(-D:save dev)
- package.json
- 配置react react-dom
- npm i react && react-dom -S(S:save)
- npm i babel-loader&&@babel/core && @babel/preset-env&&@babel/preset-react -D
- babel-loader：使用 Babel 转换 JavaScript依赖关系的 Webpack 加载器
- @babel/core：即 babel-core，将 ES6 代码转换为 ES5
- @babel/preset-env：即 babel-preset-env，根据您要支持的浏览器，决定使用哪些 transformations / plugins 和 polyfills，例如为旧浏览器提供现代浏览器的新特性
- @babel/preset-react：即 babel-preset-react，针对所有 React 插件的 Babel 预设，例如将 JSX 转换为函数
- 创建webpack.config.js&&.babelrc.js并配置
- 在src目录下创建index.html && index.js
- npm i html-webpack-plugin作为dev依赖项并配置webpack.config.js（将 js 代码通过 <script> 注入到 HTML 文件）
- npm run start生成dist
- npm i webpack-dev-server -D
- 新增script的start
- npm i css-loader style-loader -D(!!加载顺序)
- css-loader:将@import和url(...)实现require
- style-loader:将样式添加到DOM
- css模块化
参考：
使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序
