webpack-02

解析ES6和ReactJSX

解析ES6使用的是babel-loader，我们首先需要做在module的rules里面去配置babel-loader，然后这个babel-loader会依赖babel的,所以需要在项目里面写配置文件即 .babelrc

//webpack.config.json
module:{
    rules:[
      {
        test:/\.js$/, //匹配js文件
        use:'babel-loader' //指定通过`babel-loader`对js进行解析
      }
    ]
},

//.babelrc  ,babel的presets是对应的一系列babel plugin的集合，plugins里面一个plugin就是对应的一个功能
{
  "presets":[
    "@babel/preset-env", //解析ES6的babel的presets的配置
    "@babel/preset-react" //解析React JSX的babel的presets的配置
  ],
  "plugins":[
    "@babel/proposal-class-properties"
  ]
}

在项目里面安装babel的依赖

npm i @babel/core @babel/preset-env babel-loader -D
npm i react react-dom @babel/preset-react -D

// /src/search.js
'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Search extends React.Component {

  render () {
    return <div> search </div>
  }
}

ReactDOM.render(
  <Search />,
  document.getElementById('root')
);