前言

最近開始想學 react 在這之前當然要先把開發環境搞好 其中 react 最重要的就是 webpack 和 babel 了 babel 負責編譯 webpack 負責串街所有工作

安裝套件

建立一個專案並初始化

mkdir react-test
cd react-test
npm init -y
git init -y

安裝開發用套件

npm i -D \
	@babel/core \
	@babel/cli \
	@babel/preset-env \
	@babel/preset-react \
	babel-loader \
	react \
	react-dom \
	webpack

package.json

加入以下的 script

{
	"dev": "webpack --mode development",
	"watch": "webpack --mode development --watch",
	"depoly": "webpack --mode production"
}

webpack.config.js

建立 webpack.config.js 這是最小的版本了 沒有任何的擴充

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

src/dist

mkdir src dist
接下來可以把所有的 js 原始碼放在 src/ 下
html template 放在 dist/ 下

# 範例
https://github.com/simbafs/react-template