使用webpack配置react并添加到flask应用
學習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。
轉載于:https://www.cnblogs.com/luozx207/p/9739834.html
總結
以上是生活随笔為你收集整理的使用webpack配置react并添加到flask应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 非线性系统离散线性化方法（一）
- 下一篇： 运动计步app开发的功能分析