webpack學習之路（四）webpack-hot-middleware實現熱更新

時間 2019-11-08

標籤 webpack 學習之路 hot middleware 實現更新简体版

原文原文鏈接

上一節我學習了webpack-dev-middleware，可是單獨使用它並無實現熱更新，因此這節我要學習搭配使用webpack-hot-middleware，來實現熱更新功能。html

建立項目

咱們依然建立一個項目node

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
複製代碼

目錄：webpack

├── dist
│   └── index.html
├── package.json
├── server.js
├── src
│   ├── block.js
│   └── index.js
└── webpack.dev.config.js
複製代碼

下載須要的包：git

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');
});
複製代碼

運行

咱們增長一個命令運行看看github

package.json 增長一個命令web

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "server": "node server.js"
  },
複製代碼

npm run server
複製代碼

瀏覽器查看http://localhost:3000/express

效果已經出來，咱們發現此次比以前單獨使用webpack--middleware多了一行提示，由於咱們配置了熱更新日誌輸出npm

[HMR] connected
複製代碼

HMR- Hot Module Replacement即熱更新，這已經很明白地告訴咱們熱更新已經鏈接上了，咱們來驗證下。json

修改/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是中間件，能夠編寫本身的後端服務而後使用它，開發更靈活。

連接文章

webpack學習之路（五）loader初識及經常使用loader介紹

webpack學習之路（三）webpack-dev-middleware

webpack學習之路（二）webpack-dev-server實現熱更新

webpack學習之路（一）基礎配置

I am moving forward.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。