Webpack Hot Middleware 使用教程

Webpack Hot Middleware 使用教程

webpack-hot-middlewareWebpack hot reloading you can attach to your own server项目地址:https://gitcode.com/gh_mirrors/we/webpack-hot-middleware

1、项目的目录结构及介绍

Webpack Hot Middleware 项目的目录结构如下：

webpack-hot-middleware/
├── CHANGELOG.md
├── LICENSE
├── README.md
├── client-overlay.js
├── client.js
├── helpers.js
├── middleware.js
├── package-lock.json
├── package.json
├── process-update.js
└── example/
    ├── README.md
    ├── index.html
    ├── server.js
    ├── src/
    │   ├── index.js
    │   └── print.js
    └── webpack.config.js

目录结构介绍

• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• client-overlay.js: 客户端错误覆盖组件。
• client.js: 客户端热更新逻辑。
• helpers.js: 辅助函数。
• middleware.js: 中间件主文件。
• package-lock.json: 依赖包锁定文件。
• package.json: 项目配置和依赖包信息。
• process-update.js: 处理更新逻辑。
• example/: 示例目录。
  • README.md: 示例说明文档。
  • index.html: 示例页面。
  • server.js: 示例服务器文件。
  • src/: 示例源代码目录。
    • index.js: 入口文件。
    • print.js: 打印模块。
  • webpack.config.js: Webpack 配置文件。

2、项目的启动文件介绍

项目的启动文件是 example/server.js，它是一个示例服务器文件，展示了如何使用 Webpack Hot Middleware。

启动文件内容

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

启动文件介绍

• express: 引入 Express 框架。
• webpack: 引入 Webpack。
• webpackDevMiddleware: 引入 Webpack 开发中间件。
• webpackHotMiddleware: 引入 Webpack 热更新中间件。
• config: 引入 Webpack 配置文件。
• app: 创建 Express 应用。
• compiler: 创建 Webpack 编译器。
• app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })): 使用 Webpack 开发中间件。
• app.use(webpackHotMiddleware(compiler)): 使用 Webpack 热更新中间件。
• app.listen(3000, function () { console.log('Example app listening on port 3000!\n'); }): 启动服务器，监听 3000 端口。

3、项目的配置文件介绍

项目的配置文件是 example/webpack.config.js，它是一个示例 Webpack 配置文件，展示了如何配置 Webpack 以使用热更新。

配置文件内容

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client',
    './src/index.js'
  ],
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};

配置文件介绍

• mode: 设置为 development，表示开发模式。
• entry: 入口文件配置，包括热更新客户端

webpack-hot-middlewareWebpack hot reloading you can attach to your own server项目地址:https://gitcode.com/gh_mirrors/we/webpack-hot-middleware