[學習筆記]使用Babel和Webpack 5創建React App

簡短的Demo

第一步 —建立您的項目文件夾

$ mkdir my-react-app
$ cd my-react-app

第二步 —初始化您的Node project

# init your node project
$ yarn init

第三步 —安裝相關的Package

# 安裝 react 和 react-dom 
$ yarn add react react-dom
# 安裝 babel 到開發環境
$ yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties --dev
# 安裝 webpack 和相關的Package到開發環境
$ yarn add webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --dev

第四步 — 建立babel和webpack配置文件

# 建立 babel 配置文件
$ touch .babelrc
# 建立 webpack 配置文件
$ touch webpack.config.js

第五步 — 建立Project files

# create src & public folder
$ mkdir src public
# create a template html and entry point
$ touch public/index.html
$ touch src/index.js
$ touch src/App.js

第六步 — 設置配置文件

.babelrc

webpack.config.js

第七步 —建立專案內容

src/App.js

src/index.js

src/index.html

第八步 —將script添加到package.json

# add scripts and change package.json
"scripts": {
   "dev": "webpack serve --mode development",                            
   "build": "webpack --mode production"
  },

第九步 — Run yarn dev

完成