### 1.Babel and JSX [相關地址](https://www.webpackjs.com/loaders/babel-loader/#%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3) PS: yarn add babel-loader -D PS: yarn add babel-core -D 不寫命令了只寫包： ~~~ babel-preset-env babel-preset-react babel-preset-stage-0 ~~~ ~~~ yarn add babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env ~~~ ### 2.啟動 yarn start 得到下圖結果：  ## 3.完整的package.json文件 ```json { "name": "yarnReactWithWebpack", "version": "1.0.0", "description": "yarn+webpack+react", "main": "index.js", "author": "onions", "license": "MIT", "scripts": { "build": "webpack --mode production", "prestart": "yarn run build", "start": "opener http://localhost:3008 & httpster -p 3008 -d ./dist" }, "dependencies": { "httpster": "^1.0.4", "react": "^16.7.0", "react-dom": "^16.7.0", "webpack": "^4.29.0" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "opener": "^1.5.1", "webpack-cli": "^3.2.1" } } ```