TypeScript webpack-hot-middleware.default函數代碼示例

export default function(): RequestHandler[] {

  const config = require('../../webpack').default;
  const compiler = timedCompiler(config);

  const serverOptions = {
    lazy: false,
    logLevel: 'silent',
    publicPath: config.output.publicPath || '/',
    headers: { 'Access-Control-Allow-Origin': '*' }
  };

  const devMiddleware = webpackDevMiddleware(compiler, serverOptions);

  const hotMiddleware = webpackHotMiddleware(compiler, {
    log: false, path: '/__webpack_hmr', heartbeat: 10 * 1000
  });

  const middlewares: RequestHandler[] = [
    devMiddleware,
    hotMiddleware
  ];

  return middlewares;
};

  configureApp() {
    const { buildPath, multiCompiler } = this.options

    if (process.env.NODE_ENV === 'development') {
      this.app.use(errorOverlayMiddleware())
    }

    if (multiCompiler) {
      const webpackDevMiddleware = require('webpack-dev-middleware')
      const webpackHotMiddleware = require('webpack-hot-middleware')
      const webpackHotServerMiddleware = require('webpack-hot-server-middleware')

      const clientCompiler = (multiCompiler as any).compilers.find(
        (childCompiler: Compiler) => childCompiler.name === 'client'
      )

      this.app.use(
        webpackDevMiddleware(multiCompiler, {
          serverSideRender: true,
          index: false,
          quiet: true,
        })
      )

      this.app.use(webpackHotMiddleware(clientCompiler, { log: false }))

      this.app.use(
        webpackHotServerMiddleware(multiCompiler, {
          chunkName: 'index',
        })
      )
    } else if (buildPath) {
      // Serve a pre-built app.
      // Start by finding all the relevant files.
      const CLIENT_ASSETS_DIR = join(buildPath, 'static')
      const CLIENT_STATS_PATH = join(CLIENT_ASSETS_DIR, 'stats.json')
      const SERVER_RENDERER_PATH = join(buildPath, 'ssr')
      const SERVER_STATS_PATH = join(SERVER_RENDERER_PATH, 'stats.json')

      // Load server bundle and webpack stats.
      let serverRenderer = require(SERVER_RENDERER_PATH)
      serverRenderer = serverRenderer.__esModule
        ? serverRenderer.default
        : serverRenderer
      const clientStats = require(CLIENT_STATS_PATH)
      const serverStats = require(CLIENT_STATS_PATH)

      // Serve static files and server renderer.
      this.app.use(express.static(CLIENT_ASSETS_DIR, { index: false }))
      this.app.use(serverRenderer({ clientStats, serverStats }))
    } else {
      throw new Error(
        'Must pass either buildPath or webpack compiler to tux server.'
      )
    }
  }

export default function createApp
	( publicPath:string
	, contentBase:string
	, compiler:webpack.compiler.Compiler
	):SwappableExpress
	{
		const app = express() as SwappableExpress;
		const wrappedHandler = HandlerWrapper();

		app.use(webpackHotMiddleware(compiler));

		app.use(express.static(contentBase));
		
		app.use(wrappedHandler);

		app.swap = function(handler){
			wrappedHandler.swap(handler);
			return app;
		}

		return app;
	}

export function startPublications() {
  const mode = process.env.NODE_ENV || "DEVELOPMENT";
  const app = express();

  if (mode.toUpperCase() === "DEVELOPMENT") {
    const compiler = webpack(webpackConfig as webpack.Configuration);
    app.use(
      webpackDevMiddleware(compiler, {
        publicPath: webpackConfig.output.publicPath,
      })
    );
    app.use(webpackHotMiddleware(compiler));
    app.use("/playground", graphqlPlayground({ endpoint: "/graphql" }));
  } else {
    const publicPath = path.resolve(__dirname, "../public");
    app.use(express.static(publicPath));
    app.get("*", (req, res) =>
      res.sendFile(path.resolve(publicPath, "index.html"))
    );
  }

  app.use(jwt(jwtConfig));
  app.use(
    "/graphql",
    graphqlHttp(request => ({
      schema,
      context: { user: request.user },
    }))
  );
  app.use(onAuthError);
  app.get("/documents/:id/pdf", documentPdfHandler);
  app.listen(PORT, () => {
    console.log(`Publications started on port ${PORT}.`);
  });
}

// only for spa for now via opt-in (experimental feature)
async function watchHot() {
  if (project.ws.i18n) {
    await compileI18n();
  }

  const config = getSpaBuildConfig();
  const { index } = config.entry;
  config.entry.index = [
    'react-hot-loader/patch',
    resolve('webpack-hot-middleware/client')
  ].concat(Array.isArray(index) ? index : [index]);
  config.plugins = config.plugins || [];
  config.plugins.push(new HotModuleReplacementPlugin());
  const compiler = getCompiler(config, 'build');

  const middlewares: Array<any> = [
    webpackDevMiddleware(compiler, {
      publicPath: project.ws.publicPath,
      stats: getStatsOptions(),
      noInfo: true
    }),
    webpackHotMiddleware(compiler)
  ];
  await listenAsync(middlewares);
}

export const createMiddlewaresForWebpack = (
  webpackConfig: webpack.Configuration,
  index: string,
  hot: boolean = false
) => {

  const patchedWebpackConfig = hot
    ? patchWebConfigWithHMR(webpackConfig)
    : webpackConfig;

  const bundler = webpack(patchedWebpackConfig);

  const fs = new MemoryFS();

  bundler.outputFileSystem = fs;

  const devMiddleware = webpackDevMiddleware(bundler, {
    publicPath: (patchedWebpackConfig.output || {}).publicPath!,

    stats: patchedWebpackConfig.stats || {
      colors: true,
      reasons: false,
      hash: false,
      version: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      cached: false
    }
  });

  const devServerMiddlewares = [
    devMiddleware,
    ((req, res, next) => {
      if (req.method === "GET" && req.url === "/") {
        devMiddleware.waitUntilValid(() => {
          const indexFile = path.join(webpackConfig.output!.path!, index);
          res.end(fs.readFileSync(indexFile));
        });
      } else {
        next();
      }
    }) as browserSync.MiddlewareHandler
  ];

  if (hot) {
    return [
      ...devServerMiddlewares,
      webpackHotMiddleware(bundler)
    ];
  }

  return devServerMiddlewares;
};

if (config.development) {
  // tslint:disable
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const webpackConfig = require('../webpack.config');
  // tslint:enable

  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
    stats: { chunks: false },
  }));
  app.use('/assets', express.static(path.join(__dirname, '..', 'assets')));

  app.use(webpackHotMiddleware(compiler));
} else {
  app.use(compression());
  app.use('/dist', express.static(path.join(__dirname, '..', 'dist')));
  app.use('/assets', express.static(path.join(__dirname, '..', 'assets')));
}

const createPictureData = (picture) => {
  let sources;
  if (picture.sources) {
    sources = picture.sources.map((source) => ({
      url: url.resolve(config.aws.cloudfrontHost, source.filename),
      width: source.width,
    }));
  } else {
    const [base, extension] = picture.filename.split('.');

  }

  // Dev-only middleware

  const webpack = require('webpack')
  const compiler = webpack(require('../config/webpack.config.js'))
  const hot = require('webpack-hot-middleware')
  const devserver = require('webpack-dev-middleware')

  server.use(devserver(compiler, {
    publicPath: '/',
    stats: { colors: true },
    historyApiFallback: true,
  }))

  server.use(hot(compiler))

} else {
  // Production-only middleware

  const helmet = require('helmet')
  server.use(helmet())
}

server.use(renderMiddleware(app))

const port = process.env.PORT || 8000
server.listen(port, () => {
  console.log(`Application started on port ${port}`)
})

//   });
// }


const compiler = webpack(config({ PORT, HOST, PROD: false }));

const devMiddlewareConfig: webpackDevMiddlewareExtendedOptions = {
  quiet: false,
  reload: true,
  overlay: true,
  noInfo: true,
  publicPath: null,
}

const devMiddleware = webpackDevMiddleware(compiler, devMiddlewareConfig);
const hotMiddleware = webpackHotMiddleware(compiler);

const app = express();

app.use(devMiddleware);
app.use(hotMiddleware);

app.use(express.static(DIST_PATH));

console.log("Running in Path: " + DIST_PATH)

const server = app.listen(PORT, HOST, (error: Error) => {

  if (error) {
    return console.error(error);
  }

import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import App from "./App/App";

// @ts-ignore
import clientConfig from "../../client/webpack.config.js";

const compiler = webpack(clientConfig);
const options = {
    logLevel: 'warn',
    publicPath: clientConfig.output.publicPath,
};

const app = express();

app.use(webpackDevMiddleware(compiler, options));

// @ts-ignore
app.use((webpackHotMiddleware)(compiler, {
    heartbeat: 10 * 1000,
    log: console.log,
    path: "/__webpack_hmr",
}));

app.listen(
    3000,
    () => {
        console.log("Example app listening on port 3000!\n");
    },
);