TypeScript webpack-hot-middleware類代碼示例

import * as open from 'open';
import * as webpackDev from 'webpack-dev-middleware';
import * as webpackHot from 'webpack-hot-middleware';

/* eslint-disable no-console */

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

app.use(webpackDev(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(webpackHot(compiler));

app.get('*', function(req, res) {
  res.sendFile(resolve(__dirname, '../../src/index.html'));
});

app.listen(port, function(err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

console.log(`shit happening on port ${port}`);

import * as express from 'express';
import * as webpack from 'webpack';
import * as webpackHotMiddleware from 'webpack-hot-middleware';

const compiler = webpack({});

let webpackHotMiddlewareInstance = webpackHotMiddleware(compiler);

webpackHotMiddlewareInstance = webpackHotMiddleware(compiler, {
	log: console.log.bind(console),
	path: '/__what',
	heartbeat: 2000,
});

const app = express();
app.use(webpackHotMiddlewareInstance);

const addDevMiddlewares = (app: Express.Application, webpackConfig: Webpack.Configuration) => {
  const compiler = Webpack(webpackConfig);
  const middleware = WebpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
    silent: true,
    stats: 'errors-only',
  });

  app.use(middleware);
  app.use(WebpackHotMiddleware(compiler));

  // Since webpackDevMiddleware uses memory-fs internally to store build
  // artifacts, we use it instead
  const fs = middleware.fileSystem;

  if (Pkg.dllPlugin) {
    app.get(/\.dll\.js$/, (req, res) => {
      const filename = req.path.replace(/^\//, '');
      res.sendFile(Path.join(process.cwd(), Pkg.dllPlugin.path, filename));
    });
  }

  app.get('*', (req, res) => {
    fs.readFile(Path.join(compiler.options.output.path, 'index.html'), (err, file) => {
      if (err) {
        res.sendStatus(404);
      } else {
        res.send(file.toString());
      }
    });
  });
};

export default (compiler: any, opts?: any) => {
  debug('Enable Webpack Hot Module Replacement (HMR).')

  const middleware = WebpackHotMiddleware(compiler, opts)
  return async function koaWebpackHMR(ctx: any, next: any) {
    let hasNext = await applyServiceMiddleware(middleware, ctx.req, ctx.res)

    if (hasNext && next) {
      await next()
    }
  }
}

export function enableWebpackHMR(app) {
    app.use(webpackDevMiddleware(webpackCompiler, {
        publicPath: webpackConfig.output.publicPath,
        stats: {
            colors: true,
            chunks: false, // this reduces the amount of stuff I see in my terminal; configure to your needs
            'errors-only': true
        }
    }));

    var log = bunyan.createLogger({
        name: 'webpack-hmr',
        level: 'TRACE'
    });

    app.use(webpackHotMiddleware(webpackCompiler, {
        log: log.info.bind(log)
    }));
 
    return app;
}

  const rendererConfig = configs[1]

  const server = express()
  const compiler = webpack(rendererConfig)
  const port = getPortOrDefault()

  const message = 'Could not find public path from configuration'
  server.use(
    devMiddleware(compiler, {
      publicPath: u(
        message,
        u(message, u(message, rendererConfig).output).publicPath
      ),
      logLevel: 'error',
    })
  )

  server.use(hotMiddleware(compiler))

  server.listen(port, 'localhost', (err: Error | null) => {
    if (err) {
      console.log(err)
      process.exit(1)
      return
    }

    console.log(`Server running at http://localhost:${port}`)
    startApp()
  })
}