webpack+react(2)

前言

经过上一篇https://www.jianshu.com/p/4acd7c7fbcca的配置，基本将环境搭建好，可以开始写项目。

react实战

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

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

2. 配置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"]     //所有的插件
}