版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/carson0408/article/details/80897262
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文件可以得到如下图所示：
