深入淺出的webpack4構建工具--webpack4+react構建環境(二十)

龍恩0707發表於2018-10-20
WebReact

下面我們來配置下webpack4+react的開發環境，之前都是針對webpack4+vue的。下面我們也是在之前專案結構的基礎之上進行配置下。

首先看下如下是我為 webpack4+react 基本的專案結構如下：

### 目錄結構如下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄檔案             
|   |--- node_modules                       # 所有的依賴包
|   |--- app
|   | |---src
|   | | |-- index.jsx                       # 專案的入口檔案jsx
|   | | |-- hello.jsx
|   |--- views
|   | |-- index.html                        # html檔案
|   |--- webpack.config.js                  # webpack配置檔案 
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼檔案

app/src/hello.jsx 程式碼如下：

module.exports = 'Hello React';

app/src/index.jsx 程式碼如下：

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

// 引入 hello.jsx
const hello = require('./hello.jsx');

// 編寫一個簡單的元件 
class App extends React.Component {
  render() {
    return (
      <h1 style={{color: 'red'}}>{hello}</h1>
    )
  }
};

// 建立一個元件實列，將元件掛載到元素上
ReactDOM.render(<App />, document.getElementById('app'));

views/index.html 程式碼如下：

<!DOCTYPE html> 
<html>
<head>
  <title>webpack+react專案架構</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>
<body>
  <div id="app">

  </div>
  </script>
</body>
</html>

二：安裝react相關的包如下：

npm install babel-preset-react react react-dom --save

babel-preset-react 用於支援React開發裡的JSX的語法。

三：.babelrc檔案配置如下假如react的配置：

{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false   // 關閉Babel的模組轉換功能，保留ES6模組化語法
       }
     ],
     "stage-2",
     'react'
  ]
}

執行 npm run dev 後 打包，執行如何，可以看到基本配置好了。

檢視github程式碼

相關文章