webpack+react(2)

前言

经过上一篇react+webpack(1)的配置，基本将环境搭建好，可以开始写项目。

react实战

1. 
   
2. 
   

将俩个写react必须的包下载
npm install react react-dom -S

react 是创建组件，虚拟 dom，生命周期
react-dom 把创建好的虚拟 dom和组件放在页面上展示

• 配置babel
  是一个转码器，可以将es6,es7,es8,jsx...等语法转成浏览器识别的代码

cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
cnpm install babel-preset-env babel-preset-stage-0 -D
cnpm install babel-preset-react -D

• 
  
• 配置webpack.config.js
  

exclude表示排除，使用 babel-loader时必须排除 node_modules

module.exports = {
    mode: 'development', // development production
    plugins:[
        htmlPlugin
    ],
    module:{ //所有第三方模块的配置
        rules:[ //第三方匹配规则
            {test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
};

• 
  
• 配置.babelrc文件
  

在项目的根目录下新建一个 .babelrc文件

{
  "presets": ["env","stage-0","react"],   //所有的语法
  "plugins": ["transform-runtime"]     //所有的插件
}