1.前置条件：已安装webpack

项目中官方的打包与实际不相匹配，所以重新构建了项目
1）npm init 创建package.json 文件。（name 需小写）
2）创建webpackage.config.js

// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'), 
    filename: 'bundle.js'
  },
  plugins: [ // 插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' 
    })
  ],
  module: {
    rules: [
      { test: /\.(js|jsx)$/,exclude:'/node_modules',use: 'babel-loader'},
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
    ]
  },
  mode:"development"
}

3.安装依赖

1. npm i --save-dev html-webpack-plugin
2. npm i --save-dev html-dev-server
   package.json 中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },

3.npm i --save-dev react react-dom
4.babel 插件

image.png

5.babel配置文件

image.png