使用react第一步：搭建環境（webpack）
阿新 • • 發佈：2018-12-29
專案中要用到react,在此總結一下流程。
1.安裝node.js
2.新建一個根目錄，名為myapp . 在這個目錄下執行命令列
npm init順序輸入name等資訊
此時package.json已生成。因為之後的webpack是本地安裝的，所以需要修改一行程式碼，這樣之後我們就能用命令列npm start來進行打包了。
"scripts": {
"start": "webpack"
},
3.在myapp目錄下命令列 本地安裝webpack（不建議全域性安裝，）
npm install --save-dev webpack此時生成node_modules資料夾與package.lock.json
4.在myapp目錄下命令列 安裝react等包（–save命令可將包新增至package.json）
npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es20155.在myapp目錄下新建index.html webpack.config.js index.js
//webpack.config.js const path =require('path'); module.exports = { entry: path.resolve(__dirname, 'index.js'), output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["es2015","react"] } } ] } };
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>我的第一個react例子</h1>,
document.getElementById('root')
);//index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>example</title> </head> <body> <div id="root"></div> <script src="dist/bundle.js"></script> </body> </html>
6.在myApp資料夾下命令列
npm start報錯了，並提示需要安裝webpack-cli。因此命令列
npm install webpack-cli -D --save-dev之後重新npm start,發現生成dist資料夾，裡面就是打包完成的bundle.js
7.執行index.html即可
