筆記不使用create-react-app 建立一個react專案

使用 create-react-app 建立 react的專案很方便，但還是要學習一下如何不使用create-react-app 建立一個 react 專案，筆記一下 webpack 該如何設定…

1. 建立資料夾

mkdir fileName

2. 進入剛建立的資料夾

cd fileName

3. 建立package.json

npm init -y

4. 安裝 react , react-dom

npm install react react-dom

5. 建立 .gitignore 檔案

在 .gitignore 裡新増以下內容

node_modules
.DS_Store
dist

6. 新増 index.js 裡的內容

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class App extends React.Component {
	render() {
		return (
			<div>Hello World!</div>
		)
	}
}

ReactDOM.render(<App/>, document.getElementById('app'))

7. 安裝 babel 等其他需要的套件

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

8. 建立 webpack.config.js

const path = require('path')

module.exports = {
	entry: './app/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'index_bundle.js'
	},
	
	module: {
		rules: [
			{ test: /\.(js)$/, use: 'babel-loader' },
			{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
		]
	},
	
	mode: 'development'
}

9. 在 package.json中，新増以下內容

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },

修改以下內容

  "scripts": {
    刪除 "test": "echo \"Error: no test specified\" && exit 1", 
    新増 "build": "webpack"
  },

10. npm run build

如可看到新増的 dis/index_bundle.js 表示完成基本的設定

11. 使用 html-webpack-plugin 複製html file 到 dist

在 webpack.config.js 裡新増以下內容

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
	new HtmlWebpackPlugin({
		template: 'app/index.html'
	})
]

再執行 npm run build 後，應可看 index.html 裡複製到 dist/ 裡

12. 修改 package.json 裡的 build 成 start,即可 hot reload

"build": "webpack",
"start": "webpack-dev-server"

執行 npm run start , 即可在 http://localhost:8080/ 看到建立好的網頁

---

完整的 package.json 內容：

{
  "name": "tyler-github-battle-2019",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

完整的 webpack.config.js 內容

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
	entry: './app/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'index_bundle.js'
	},
	
	module: {
		rules: [
			{ test: /\.(js)$/, use: 'babel-loader' },
			{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
		]
	},
	
	mode: 'development',
	plugins: [
		new HtmlWebpackPlugin({
			template: 'app/index.html'
		})
	]
}