1. 建立项目文件夹

2. 当前项目路径打开cmd

3. yarn init -y

4. yarn add webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-react -D

5. 新建webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');


let path = require('path');

module.exports = {
  mode:'development'，
  entry:'./src/index.js' ,
  output:{
      filename:'bundle.js',
      path:path.resolve(__dirname,'dist') //文件打包到dist/bundle.js文件中
  },

  plugins:[ //放所有webpack插件
      new HtmlWebpackPlugin({
          template: './public/index.html'
      })
  ]
};

6. 按图示目录结构建立index.js index.html

   
   image.png

7. cmd中执行打包命令 npx webpack
   生成dist目录内容

1. webpack-dev-server: 更改内容不用重启
    package.json中：
"scripts": {
    "dev": "webpack-dev-server"
  }


npm run dev

2. html-webpack-plugin: 将html文件加载到内存
    webpack.config.json中：
"scripts": {
    "dev": "webpack-dev-server"
  }


npm run dev

3. react react-dom
react: 专门用于创建组件和虚拟dom，同时组件的生命周期都在这个包中
react-dom: 专门进行dom操作的，最主要的应用场景，就是ReactDOM.render()

4. react引入步骤
/*
*
* 1. 创建容器
*
* 2. 导入包
*
* 3. 创建虚拟dom元素
*
* 4. 渲染
*
* */

1. 
jsx的解析需引入babel 插件:
babel-core babel-loader@7 babel-plugin-transform-runtime

babel-preset-env babel-preset-stage-0

能够识别jsx并进行转换的包：
babel-preset-react

2. webpack.config.js中添加配置


module:{ //所有第三方模块的匹配规则
        rules:[ //第三方匹配规则
            {
                test:/\.js|jsx$/,
                use:{
                    loader:'babel-loader',
                },
                exclude:/node_modules/ //
            }
        ]
    }
3. 创建babel配置文件 .babelrc
{
  "presets": ["env","stage-0","react"],
  "plugins": ["transform-runtime"]
}

babel-loader7和babel8版本的问题

//1.第一种创建组件的方式 构造函数

<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello> // 为组件传递props数据

function Hello(props){ //props 只读，不能被赋值
    //如果在一个组件中return null，表示此组件什么都不会渲染
   // return null;
    //在组件中，必须返回一个合法的jsx虚拟Dom元素
    console.log(props);
    return <div>这是一个hello组件,{props.name} {props.age} {props.gender}</div>
}