现在react项目越来越复杂，在工作大多数是不会经历创建项目的，直接参与开发的；本篇文章简单介绍零基础创建项目
基础：node npm
创建项目名称
首先要确认吧项目放在哪里，比如：D盘，my-webApp的文件中。在my-webApp文件中创建src；src简单说是维护代码的文件夹；
文件夹创建成功之后，要先初始化项目 npm init -y
工具：
1：webPack 安装
1:npm install webpack –save-dev
2:npm install webpack-cli --save-dev
3:npm install webpack-dev-server --save-dev
安装webPack插件之后，会发现自动生成3个文件，具体大家可以详细了解webpack;这里不详细介绍，之后应该会有webpack说明的文章
简单说明--save-dev --save：首先npm 是一个包管理器，npm安装插件，会把插件安装到node_modules目录中；其次我们依赖的这些东西，有些线上也要依赖，有的是单纯的开发模式下需要，--save 会自动更改package.json 写入dependencies 节点，--save-dev安装到开发依赖中，项目上线之后不会用到的插件，会自动更改package.json 写入devDependencies 节点；
2：babel安装
npm install @babel/core –save-dev
npm install @babel/preset-env –save-dev
npm install @babel/preset-react --save-dev
babel-loader
简单说明：babel是一个 JavaScript 编译器,尽可能用最少的代码并且不依赖太大量的运行环境。
在项目文件下面创建.babelrc文件，并且配置
3：安装 babel-loader
npm i babel-loader --save-dev
loaders 可以让 webpack 处理很多不同格式的文件（例如:图片、CSS 、 JSX ...） ,项目中一般都会用到，我们先安装上。:
4：创建webpack.config.js
舞台
s项目主要文件和内容(src文件下面)
搬砖灵魂：npm install react –save npm install react-dom –save
1：index.html:
2:main.js:
演出对象
上面配置完成之后，最后增加两个参数: HtmlWebPackPlugin ,CleanWebpackPlugin
webpack水比较深这里简单说明一下：
1：HtmlWebPackPlugin是就是生成一个html文件：npminstall--save-dev html-webpack-plugin
:2：CleanWebpackPlugin会清除之前的文件：npm install --save-dev clean-webpack-plugin
上面是已经把工具和舞台和演出对象全部完成 npm start 就可以查看 demo 的运行效果
说明：
package.json简单说明：
{
"name": "my-webApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-cli": "^6.26.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.1",
"webpack": "^5.14.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
webpack.config.js 配置
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},{
test: /\.html$/,
use: {
loader: 'html-loader'
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
title: 'react app',
filename: 'index.html',
template: './src/index.html'
}),
new CleanWebpackPlugin(),
],
devServer: {
host: 'localhost',
port: 3003,
open: true
}
};
注意事项：
1：运行错误Error: Cannot find module 'webpack-cli/bin/config-yargs'；解决：安装 webpack-cli 3.* 版本
2：CleanWebpackPlugin的新用法
const { CleanWebpackPlugin } =require('clean-webpack-plugin');
module.exports = {
plugins: [ new CleanWebpackPlugin() ]
}
