Путь изучения webpack (4) webpack-hot-middleware реализует горячее обновление

Webpack

Я узнал в предыдущем разделе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Это промежуточное программное обеспечение, вы можете написать свой собственный серверный сервис, а затем использовать его, и разработка более гибкая.

ссылка на статью

Webpack Learning Road (5) Введение в загрузчики и распространенные загрузчики

Путь изучения веб-пакетов (3) webpack-dev-middleware

Путь изучения webpack (2) webpack-dev-server реализует горячее обновление

Webpack Learning Road (1) Базовая конфигурация

I am moving forward.

Категории