TypeScript webpack-dev-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 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}.`);
  });
}

function webpackFactory(useWebpack: boolean): express.RequestHandler {
  if (!useWebpack || path.basename(parentPath) === 'node_modules') return (_1, _2, next) => next();
  let webpack = require('webpack');
  let webpackData = require(webpackPath);
  let webpackMiddleware = require('webpack-dev-middleware');
  return webpackMiddleware(webpack(webpackData), {publicPath: '/'});
}

// 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;
};

 handler: function handler(req: any, res: any) {
     middleware(req, res, function () {
         // Ensure script and style bundles are served.
         // They are mentioned in the custom karma context page and we don't want them to 404.
         const alwaysServe = [
             '/_shark_test_/angular.dll.js',
             '/_shark_test_/polyfills.js',
             '/_shark_test_/bootstrap.js',
             '/_shark_test_/main.js'
         ];
         if (alwaysServe.indexOf(req.url) != -1) {
             res.statusCode = 200;
             res.end();
         } else {
             res.statusCode = 404;
             res.end('Not found');
         }
     });
 }

 handler: function handler(req: any, res: any) {
   webpackMiddleware(req, res, function () {
     // Ensure script and style bundles are served.
     // They are mentioned in the custom karma context page and we don't want them to 404.
     const alwaysServe = [
       '/_karma_webpack_/runtime.js',
       '/_karma_webpack_/polyfills.js',
       '/_karma_webpack_/scripts.js',
       '/_karma_webpack_/vendor.js',
     ];
     if (alwaysServe.indexOf(req.url) != -1) {
       res.statusCode = 200;
       res.end();
     } else {
       res.statusCode = 404;
       res.end('Not found');
     }
   });
 }

  } catch (error) {
    console.error('dev.private.json file not present in /config directory')
    process.exit(1)
  }

  // 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

export async function webpackDevServer({
  cosmosConfig,
  expressApp,
  sendMessage
}: DevServerPluginArgs) {
  const userWebpack = getWebpack(cosmosConfig.rootDir);
  if (!userWebpack) {
    return;
  }

  const webpackConfig = getDevWebpackConfig(cosmosConfig, userWebpack);

  // Serve static path derived from devServer.contentBase webpack config
  if (cosmosConfig.staticPath === null) {
    const staticPath = getWebpackStaticPath(webpackConfig);
    if (staticPath !== null) {
      serveStaticDir(
        expressApp,
        resolvePath(cosmosConfig.rootDir, staticPath),
        cosmosConfig.publicUrl
      );
    }
  }

  function sendBuildMessage(msg: BuildMessage) {
    sendMessage(msg);
  }

  const webpackCompiler = userWebpack(webpackConfig);
  webpackCompiler.hooks.invalid.tap('Cosmos', filePath => {
    const relFilePath = path.relative(process.cwd(), filePath);
    console.log('[Cosmos] webpack build invalidated by', relFilePath);
    sendBuildMessage({ type: 'buildStart' });
  });
  webpackCompiler.hooks.failed.tap('Cosmos', () => {
    sendBuildMessage({ type: 'buildError' });
  });
  const onCompilationDone: Promise<void> = new Promise(resolve => {
    webpackCompiler.hooks.done.tap('Cosmos', stats => {
      resolve();
      if (stats.hasErrors()) {
        sendBuildMessage({ type: 'buildError' });
      } else {
        sendBuildMessage({ type: 'buildDone' });
      }
    });
  });

  console.log('[Cosmos] Building webpack...');
  const wdmInst = webpackDevMiddleware(webpackCompiler, {
    // publicPath is the base path for the webpack assets and has to match
    // webpack.output.path
    publicPath: getRootUrl(cosmosConfig.publicUrl),
    logLevel: 'warn'
  });

  expressApp.use(wdmInst);

  const { hotReload } = createWebpackCosmosConfig(cosmosConfig);
  if (hotReload) {
    expressApp.use(webpackHotMiddleware(webpackCompiler));
  }

  await onCompilationDone;

  return async () => {
    await promisify(wdmInst.close.bind(wdmInst))();
  };
}