webpack学习之路（四）webpack-hot-middleware实现热更新
生活随笔
收集整理的這篇文章主要介紹了
webpack学习之路（四）webpack-hot-middleware实现热更新
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上一節我學習了webpack-dev-middleware，但是單獨使用它并沒有實現熱更新，所以這節我要學習搭配使用webpack-hot-middleware，來實現熱更新功能。
創建項目
我們依然創建一個項目
mkdir hot-middleware && cd hot-middleware npm init -y mkdir src dist cd src && touch index.js block.js cd ../dist && touch index.html cd ../ touch server.js webpack.dev.config.js 復制代碼目錄：
├── dist │?? └── index.html ├── package.json ├── server.js ├── src │?? ├── block.js │?? └── index.js └── webpack.dev.config.js 復制代碼下載需要的包：
npm i webpack webpack-cli webpack-dev-middleware webpack-hot-middleware express --save-dev 復制代碼編寫內容
/dist/index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack-hot-middleware</title><!-- 引用打包后js文件 --><script src="./index.js"></script> </head> <body> </body> </html> 復制代碼/src/index.js
'use strict' import { test } from './block.js' console.log('hello world~')test() // 接收熱更新輸出，只有accept才能被更新 if (module.hot) {module.hot.accept(); } 復制代碼/src/block.js
'use strict'module.exports = {test: function () {console.log(12345)} } 復制代碼webpack.dev.config.js
var webpack = require('webpack'); var path = require('path')module.exports = {mode: 'development', // 熱更新只在開發模式下有用entry: [ + 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', // 必須這么寫，這將連接到服務器，以便在包重新構建時接收通知，然后相應地更新客戶端'./src/index.js'],output: {path: path.resolve(__dirname, 'dist'),publicPath: '/', // 服務器腳本會用到filename: 'index.js'},plugins: [ + new webpack.HotModuleReplacementPlugin(), // 啟動HMR + new webpack.NoEmitOnErrorsPlugin() // 在編譯出現錯誤時，使用 NoEmitOnErrorsPlugin 來跳過輸出階段。這樣可以確保輸出資源不會包含錯誤。], }; 復制代碼server.js
const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware');const app = express(); const config = require('./webpack.dev.config.js'); // 引入配置文件 const compiler = webpack(config); // 初始化編譯器// 使用webpack-dev-middleware中間件 app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath }));// 使用webpack-hot-middleware中間件，配置在console臺輸出日志 + app.use(webpackHotMiddleware(compiler, { + log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000 + }));// 使用靜態資源目錄，才能訪問到/dist/idndex.html app.use(express.static(config.output.path))// Serve the files on port 3000. app.listen(3000, function () {console.log('Example app listening on port 3000!\n'); }); 復制代碼運行
我們增加一個命令運行看看
package.json 增加一個命令
"scripts": {"test": "echo \"Error: no test specified\" && exit 1", + "server": "node server.js"}, 復制代碼npm run server 復制代碼瀏覽器查看http://localhost:3000/
效果已經出來，我們發現這次比之前單獨使用webpack--middleware多了一行提示，因為我們配置了熱更新日志輸出
[HMR] connected 復制代碼HMR- Hot Module Replacement即熱更新，這已經很明白地告訴我們熱更新已經連接上了，我們來驗證下。
修改/src/block.js
'use strict'module.exports = {test: function () {console.log('abcd')} } 復制代碼我們發現，請求只是多出來兩行，并沒有刷新頁面
控制臺也輸出了過程到此，我們就使用webpack-dev-middleware和webpack-hot-middleware實現了熱更新。
詳細配置請參考官方文檔webpack-hot-middleware
為什么有了webpack-dev-server，還有有webpack-dev-middleware搭配webpack-hot-middleware的方式呢？
因為webpack-dev-server是封裝好的，除了webpack.config和命令行參數之外，很難去做定制型開發。而 webpack-dev-middleware是中間件，可以編寫自己的后端服務然后使用它，開發更靈活。
I am moving forward.
轉載于:https://juejin.im/post/5cf8a80df265da1bb67a0894
總結
以上是生活随笔為你收集整理的webpack学习之路（四）webpack-hot-middleware实现热更新的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 其他平台上测试工具的使用
- 下一篇： DJANGO学习过程中遇到的问题