深入淺出的webpack4構建工具--webpack4+react構建環境(二十)
阿新 • • 發佈：2018-11-08
下面我們來配置下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 後 打包，執行如何，可以看到基本配置好了。
