初始化 npm
$ npm init
安裝 webpack、babel、react 相關套件
$ npm i --save-dev webpack webpack-cli
$ npm i --save react react-dom
$ npm i --save-dev babel-loader @babel/core
$ npm i --save-dev @babel/preset-env @babel/preset-react
設定檔
-
webpack.config.js
const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, ], }, output: { filename: "index.js", path: path.resolve(__dirname, "dist"), }, };
-
.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
開始寫第一個 react app
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="root"></div> <script src="./dist/index.js"></script> </body> </html>
-
src/index.js
import React from "react"; import ReactDOM from "react-dom"; class App extends React.Component { render() { return <div>hello world</div>; } } ReactDOM.render(<App />, document.getElementById("root"));
編譯
-
使用 npx
$ npx webpack
-
或是在
package.json
新增 script{ "name": "react-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.6", "webpack": "^4.40.2", "webpack-cli": "^3.3.9" }, "dependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" } }
$ npm start