express+webpack中间件实现浏览器的实时刷新

最新推荐文章于 2025-06-20 15:02:32 发布

忘于江湖-CJF

最新推荐文章于 2025-06-20 15:02:32 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript React 文章标签： javascript webpack-dev-middleware webpack-hot-middleware express 热替换

本文链接：https://blog.csdn.net/u013356907/article/details/80343829

本文介绍了如何结合Express和webpack，利用webpack-dev-middleware和webpack-hot-middleware中间件实现浏览器的实时刷新功能。在项目中，通过webpack处理模块依赖，并通过npm start启动项目，当修改源代码后，浏览器会自动刷新展示最新改动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

express+webpack中间件实现浏览器的实时刷新

1、Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架。

2、webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。我们使用 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个我们需要的目标文件。

3、我们使用的webpack中间是webapck-dev-middleware和webpack-hot-middleware

整个项目的目录如下
这里写图片描述
首先我们看一下webpack配置文件

let webpack = require('webpack');
module.exports = {
        //获取到入口文件并加上 webpack-hot-middleware 配置
    entry: ["./src/index.tsx","webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true"],
    output: {
        //内存路径
        publicPath: "/dist/",
        filename: "bundle.js",
        //使用npm start不会再当前文件下生成dist/bundle.js  index.html文件中应用的内存中生成dist/bundle.js
        path: __dirname + "/dist"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".json"]
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        //HMR  该插件必不可少
        new webpack.HotModuleReplacementPlugin()
    ],
    //externals 会使 webpack将所有对"react"的导入转换成从React全局变量中加载（即window.React）
    // externals: {
   
   
    //     'react': 'React',
    //     'react-dom': 'ReactDOM'
    // }

}

server.js

let webpack = require("webpack");
let path = require("path");
let express = require("express");
let webpackDevMiddleWare = require("webpack-dev-middleware");
let webpackHotMiddleWare =