Webpack Reactjs#

前言#

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

安裝套件#

建立一個專案並初始化#

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

plaintext

安裝開發用套件#

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

plaintext

package.json#

加入以下的 script

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

json

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

plaintext