webpack熱更新配置小結
- 2019 年 12 月 4 日
- 筆記
webpack熱更新配置
熱更新，可以使開發的人在修改代碼後，不用刷新瀏覽器即可以看到修改後的效果。而它的另一個好處則是可以只替換修改部分相關的代碼，大大的縮短了構建的時間。
熱更新一般會涉及到兩種場景下面的使用，一個是項目屬於純前端資源的，另一種是node工程項目。
純前端資源配置
配置過程內容比較多，這裡大致描述下實現熱更新能力需要做些什麼。
首先安裝相關的包，會發現熱更新的能力主要是webpack-dev-server實現，它提供一個本地服務器，並且在內容發生變化時更新瀏覽器內容。而react-hot-loader主要作用是重刷react組件，非react項目中不要，這樣配置又簡化了。
然後在構建的配置文件中需要做一些配置，該配置作用是將熱更新所需要的代碼注入到入口js文件中
配置完成後，你只需要修改代碼，靜靜的看着瀏覽器更新就好了。
react-hot-loader這個組件比較強大，可以在redux或者react native項目中使用。
node工程資源配置
這裡配置方法與上面類似，在此基礎之上多了一些配置
demo在github上可下載運行
首先， 我們需要一個中間件，嵌入到server中（server以koa2為例）
npm i —save koa-webpack
koa-webpack其中主要依賴兩個包webpack-dev-middleware和webpack-hot-middleware, 拆開來使用也可以，配置也都類似
第二步，修改構建配置文件
之前這裡是使用server來刷新內容的，這種場景下是去掉了webpack-dev-server插件而使用webpack-hot-middleware實現
entry: { index: ['react-hot-loader/patch', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js' ] }
第三步，在server中require這個中間件
const webpackMiddleware = require('koa-webpack'); const config = require('./webpack.config.babel');
第四步， 配置server所需要的參數
這裡主要是config參數和dev.publicPath,其他參數可選而已，這裡列出來看看
app.use(webpackMiddleware({ config: config, dev: { publicPath: config.output.publicPath, // public path to bind the middleware to // use the same as in webpack // publicPath is required, whereas all other options are optional noInfo: false } }));
第五步，修改啟動server
const http = require('http'); const server = http.createServer(app.callback()); server.listen(8080, () => { console.log('server running at http://127.0.0.1:8080'); });
啟動程序後查看效果，修改代碼後直接看瀏覽器內容是否更新
上面過程中可能遇到的問題
- 無法熱更新，可能是服務器配置端口和構建中熱更新插件的端口或路徑不一致
- 入口js文件編譯後，生成的資源的路徑由參數
dev.publicPath決定（因為文件是生成在內存中，由外部文件服務器來管理。這裡不同於之前純前端場景下路徑由output.path和output.publicPath來控制） - 生成環境和測試環境區分構建配置文件（好像是廢話）
