Webpack_（第三章）_實現對React框架代碼的打包

配置React代碼的打包
react代碼是一套非常先進的前端框架代碼，我們如果想寫react的代碼，如何進行react代碼的打包呢？

在babel 的官網上的preset配置項，執行npm install --sava--dev @babel/preset-react
如果想對react代碼打包的話，可以藉助babel的preset-react，幫助我們解析react中的語法，使用她我們就可以在項目中編寫react的語法結構了

安裝react框架
在項目中執行 npm install react react-dom -D 來安裝react框架對應的內容

import '@babel/polyfill';

import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
  render () {
    return <div>Hello World</div>
  }
}
ReactDom.render(<App />, document.getElementById('root'))

react代碼的含義是：使用react框架創建了一個組件，這個組件會在頁面上渲染出div中 HelloWorld這樣的內容，ReactDOM會將這個組件掛載到頁面上html id爲root的DOM節點上，這個節點上就會展示出HelloWorld的內容
運行項目，項目會報錯，無法識別語法的內容，所以我們使用webpack結合babel直接打包是不行的，如果想用webpack結合babel打包react框架代碼，需要使用npm install --sava--dev @babel/preset-react，並在babelrc中做配置

  "presets": [
    [
      "@babel/preset-env", {
        "useBuiltIns": "usage"
      }
    ],
    [
      "@babel/preset-react"  
    ]
  ]

babel在做打包的時候，轉換一下react的語法，preset中的語法轉換是有順序的，會先執行preset-react轉換react語法，之後再去執行preset-env，也就是從下往上的執行順序，從右往左的執行順序。
重新運行項目，就可以看到react語法可以正常運行了。

加粗樣式