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

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 webpackHotMi