學習react，配置是很痛苦的一關，雖然現在有了create-react-app這樣方便的工具，但是必須要自己配置一遍，才能更好地進行項目開發。
首先要明確一個概念：react的文件必須經過編譯才能被瀏覽器識別，因此我們需要webpack這個打包工具來把react的組件打包成一個js文件，然后將這個js文件放到flask目錄下，然后引入到flask模版的html文件里面。當然，你也可以在前端用express等服務進行客戶端渲染，只將flask服務視為一個傳遞數據的api。
下面開始配置吧
1、如果你的電腦沒有安裝node.js，先裝node.js
brew install node 或者yarn install node
然后查看node和npm的版本檢查安裝情況，npm是node自帶的安裝工具
node -v npm -v
2、npm安裝的時候有可能很慢，最好把資源換成淘寶的
npm config set registry https://registry.npm.taobao.org
驗證配置是否成功
npm config get registry
3、新建一個空的文件夾作為項目根目錄，在項目根目錄
npm init
接下來要填的東西按需求填寫，也可以之后在package.json中修改
現在根目錄多了一個文件package.json，這個是npm的配置文件。之后我們會在這個文件里定義一些npm的腳本。
4、因為我們的項目需要用到webpack和react，先裝上
npm install -s webpack npm install -s react
-s表示會把這個包連同版本號寫到package.json的dependencies中，如果加上-d就會把這個包寫到devDependencies。package.json中的dependencies與devDependencies兩項的區別是：devDependencies中的插件只用於開發環境（development）而不用於生產環境（production），如何在運行的時候指定開發環境或生產環境我們之后會提到。
5、在項目根目錄新建一個名為webpack.config.js的文件，這個文件用於配置webpack
const path= require('path')//引用path包。在node_modules中
const HTMLPlugin=require('html-webpack-plugin') module.exports={ entry:{ app:path.join(__dirname,'/client/main.js')//main.js作為打包的入口，根據main中的依賴關系整體打包
}, output:{//打包后的輸出
filename:'[name].[hash].js',//打包后輸出的文件名。name就是entry中入口文件的名字，這里是app。
//webpack會根據打包的文件內容計算hash，當文件內容有變動的時候hash值才會變化
//這樣的話，沒有文件改動的時候不會刷新瀏覽器緩存
path:path.join(__dirname,'/static'),//輸出路徑
publicPath:''//靜態資源文件引用時的路徑，在瀏覽器中的引用變為'public/app.hash.js'。不太理解
}, module:{ rules:[//rules里可以配很多loader
{ test: /\.jsx?$/,//如何識別jsx類型的文件
loader:'babel-loader'//babel可以將最新js語法編譯到低版本
} ] }, plugins:[ new HTMLPlugin({ template:path.join(__dirname,'/client/template.html')//html模版
}) ], devServer:{ port:'8888', contentBase:path.join(__dirname,'/static'),//對應打包后輸出的path
overlay:{ errors:true//獲取到的錯誤信息會在頁面上顯示
} } }
這樣配置的話需要裝很多依賴庫。首先裝上html-webpack-plugin，這是一個可以在webpack輸出目錄生成一個html頁面，同時將打包好的js文件引入頁面。如果我們要用webpack-dev-server，這個庫必須要裝。
然后裝上webpack-dev-server，這個服務啟動后，訪問本機對應的端口就可以看到項目的效果，當你對文件有任何修改時，它會自動編譯出js文件與html文件存在內存中，然后調用這些文件渲染出html展示內容。達到的效果就是可以在編輯保存文件后，不用手動執行build，刷新一下頁面就可以看到修改后的內容
然后是babel-loader這個庫，這個庫的作用是將react特有的jsx語言翻譯成瀏覽器可以識別的js語言。裝了它之后還要裝很多其他的庫，之前看教程裝了babel-core等庫都運行不成功，說版本太舊，所以正確的姿勢是裝上@babel/core、@babel/preset-react、@babel/preset-env這三個庫，然后在根目錄新建一個名為.bablerc的babel配置文件，內容是
{ "presets": ["@babel/preset-env","@babel/preset-react"] }
6、我們開始寫一個可以打包的包含react組件的js文件
在項目根目錄新建如webpack配置所述的打包入口文件，內容為
import React from 'react'; import ReactDOM from 'react-dom'; class Clock extends React.Component { constructor(props) { super(props); this.state = { opacity: 1.0, date:new Date()//new Date()時會獲取新的時間
} } componentDidMount() { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .1; if (opacity <= 0) { opacity = 1.0; this.setState({ date:new Date() }); } this.setState({ opacity: opacity }); }.bind(this), 100); } render() { return ( <div>
<h1>MyClock</h1>
<h2 style={{opacity: this.state.opacity}}>{this.state.date.toLocaleTimeString()}</h2>
</div>
); //記得要加toLocaleTimeString，報錯卡我了20分鍾
} } ReactDOM.render(<Clock />,document.getElementById('root'))
這是一個簡單的時鍾組件，要注意的是最后返回的時候這個組件是掛在root節點的，但是我們用html-webpack-plugin自動生成的文件是不會生成一個root節點的，因此就需要給它一個模版html，里面包含root節點。如果你問為什么不直接掛在body上，因為掛在body上編譯的時候會一直有個warning，很煩，所以我就聽它的掛在節點上啦。
html模版如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
7、該配置的配置了，需要打包的文件也寫好了。現在我們到package.json里寫一下npm腳本，然后就可以用npm進行打包或者運行開發服務器了
"scripts": {"build": "rimraf static && webpack --mode=production --config webpack.config.js", "dev": "webpack-dev-server --mode=development --config webpack.config.js" },
build是打包命令，dev是運行webpack-dev-server。用 --mode=... 可以設置命令執行在開發環境還是生產環境。rimraf是一個可以刪除文件的工具庫，我們也把它裝上先，它可以幫我們在每一次build之前先把之前生成過的打包文件刪除。
8、測試一下
打包：
npm run build
運行開發服務器
npm run dev
9、將打包的js文件引入到flask應用
在項目根目錄創建run.py文件，加上一個最簡單的路由：
@app.route('/') def index(): return render_template('1.html')
再創建templates文件夾和該文件夾下的1.html文件，文件內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="{{ url_for('static', filename='app.16d576b97de33ccfcd4f.js') }}"></script>
</body>
</html>
然后運行run.py文件，就可以通過訪問flask應用的端口來獲取我們寫的前端應用了。
這么做就免去了配置前端服務器和配置nginx反向代理的過程，響應速度我個人感覺也不會太慢，但是build之后如果js文件名變化要改1.html中相應的內容。反正開發的時候用webpack-dev-server，測試好了再build。