1.npm init -y 初始化配置环境
2.安装相关软件包
1.npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin
copy-webpack-plugin -D
2.npm install --save-dev css-loader style-loader sass-loader node-sass
3.npm install @babel/plugin-proposal-class-properties -D
（2）为支持jsx语法，需要安装 babel-loader。还需要安装 babel 相关的东西
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
#babel-plugin-transform-runtime 可重新使用Babel注入的帮助程序代码以节省代码大小
3.项目根目录下创建一个 babel 的配置文件。 .babelrc | babel.config.js
（1）配置 转换器规则
（2）为了支持 public class field 实验语法
（2.1）. 需要安装 @babel/plugin-proposal-class-properties
（2.2）. 修改 babel 的配置文件即可。
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties"]
}
4.在根目录下创建 webpack.config.js 并进行配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
// 开发模式
mode: 'development',
//入口文件
entry: './src/index.js',
// 出口文件目录为根目录下dist, 输出的文件名为main
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules:[
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
// 排除node-modules 文件夹，减少文件大小
exclude: [path.resolve(__dirname,'./node_modules')]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(scss|sass)$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
},
plugins: [
//负责将html文档虚拟到根目录下
new HtmlWebpackPlugin ({
// 虚拟html的模板为 src下的index.html
template: path.resolve(__dirname,'./public/index.html'),
// 虚拟的html文件名 index.html
filename: 'index.html'
}),
//将单个文件或整个目录复制到构建目录
new CopyWebpackPlugin()
],
//配置开发服务器, 并配置自动刷新
devServer: {
// 根目录下dist为基本目录
contentBase: path.resolve(__dirname,'./dist'),
stats: 'errors-only',
// 自动压缩代码
compress: true,
// 服务端口为1208
port: 1208,
// 自动打开浏览器
open: true
}
};
5.启动命令行 ： npm run dev
在package.json内scripts中添加"dev": "webpack-dev-server"