1.安裝node.js
2.創建自己的工程文件夾
本文主要創建一個項目文件夾：D:\Users\hangfengzhang\WebWorkSpace
3.npm init初始化
在node.js command 上輸入 npm init 進行初始化，則在WebWorkSpace會出現package.json文件。
在packagre.json中添加：
"scripts": {
"start": "webpack"
},
4.安裝webpack
輸入命令：npm install --save-dev webpack
即安裝了webpack
5.安裝react相關組件
npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
分別輸入以上指令進行安裝
6.創建文件index.js index.html webpack.config.js
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>index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>我的第一個react例子</h1>,
document.getElementById('root')
);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"]
}
}
]
}
};7.運行
在工程文件位置下命令窗口輸入npm start，命令窗口運行結果：
點擊index.html文件可以得到如下圖所示：
