1.首先你必须装有node和npm
2.进入demo目录，npm install -y。创建模块的描述文件package.json，-y是默认所有参数。使用npm创建的库、框架和项目都可以成为模块，而package.json是模块的描述文件。
3.安装webpack和webpack-cli，npm install webpack webpack-cli --save-dev。从webpack4开始webpack和webpack-cli分开管理，所以都需要安装。--save-dev是作为项目开发依赖安装。
在package.json中添加下面代码
"scripts": { "build": "webpack --mode production" }
4.安装babel相关，npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev。babel-loader是webpack加载器，babel可以将es6代码转换为浏览器可以理解的代码。
5.配置babel，在在根目录创建.babelrc文件，添加下面代码
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
6.创建webpack配置文件webpack.config.js，添加下面代码，意思是扩展名是.js的文件，webpack会通过babel-loader来加载代码，将es6转换为es5
module.exports = { module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } };
7.安装react和react-dom，npm install react react-dom --save-dev。
8.在src文件夹下添加index.js文件，添加如下代码
9.运行命令npm run build生成bundle，bundle会被放在./dist/main.js。在dist下创建index.html文件，添加代码如下
<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <div id="root"></div> <script src="./main.js"></script> </body> </html>
10.在浏览器中打开index.html文件，如果一切正常会显示hello world.文字。
11.使用webpack插件自动将bundle放入页面的script中，运行命令npm install html-webpack-plugin html-loader --save-dev。然后更新webpack配置
const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.html$/, use: [ { loader: "html-loader" } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }) ] };
添加index.html文件到src文件夹
<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <div id="root"></div> </body> </html>
这时运行npm run build会在dist文件夹下生成合成的html文件和bundle文件，在浏览器中打开index.html即可看到效果。
12.使用webpack dev server在每次修改时自动刷新窗口，安装插件npm install webpack-dev-server --save-dev。在package.json中添加下面脚本
"scripts": { "start": "webpack-dev-server --open --mode development", "build": "webpack" }
13.现在运行npm start即可自动打开浏览器显示窗口。每次修改代码窗口会自动刷新。
这时一个简单的react开发环境就配置完成了，包括了
node项目的创建
webpack包的安装，用于打包项目
babel的安装，用于es6到es5的转换
react安装
html-webpack-plugin安装，用于将生成的bundle加入html模板的script标签中
webpack-dev-server安装，用于创建一个小的本地服务器和在代码修改后重新刷新窗口
最后package.json文件应该是这样
{ "name": "react_demo_base", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --open --mode development", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.6", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "react": "^16.8.6", "react-dom": "^16.8.6", "webpack": "^4.35.0", "webpack-cli": "^3.3.5", "webpack-dev-server": "^3.7.2" } }
使用项目中下图所示文件可以运行npm install命令快速创建react开发环境
