• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript webpack-dev-middleware.default函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中webpack-dev-middleware.default函数的典型用法代码示例。如果您正苦于以下问题:TypeScript default函数的具体用法?TypeScript default怎么用?TypeScript default使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了default函数的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: function

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;
};
开发者ID:atSistemas,项目名称:angular-base,代码行数:25,代码来源:dev-middleware.ts


示例2: configureApp

  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.'
      )
    }
  }
开发者ID:aranja,项目名称:tux,代码行数:56,代码来源:Server.ts


示例3: startPublications

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}.`);
  });
}
开发者ID:carlospaelinck,项目名称:publications-js,代码行数:35,代码来源:index.ts


示例4: webpackFactory

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: '/'});
}
开发者ID:Deathspike,项目名称:mangarack,代码行数:7,代码来源:serve.ts


示例5: watchHot

// 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);
}
开发者ID:otbe,项目名称:ws,代码行数:26,代码来源:watch.ts


示例6: patchWebConfigWithHMR

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;
};
开发者ID:morlay,项目名称:webpack-browser-sync,代码行数:54,代码来源:WebpackOptions.ts


示例7: handler

 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');
         }
     });
 }
开发者ID:bobojiayou,项目名称:shark-test,代码行数:19,代码来源:karma.ts


示例8: handler

 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');
     }
   });
 }
开发者ID:rexebin,项目名称:angular-cli,代码行数:19,代码来源:karma.ts


示例9: catch

  } 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
开发者ID:chrisdevereux,项目名称:ts-react,代码行数:30,代码来源:server.ts


示例10: sendBuildMessage

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))();
  };
}
开发者ID:skidding,项目名称:cosmos,代码行数:69,代码来源:devServer.ts



注:本文中的webpack-dev-middleware.default函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript webpack-dev-server.close函数代码示例发布时间:2022-05-25
下一篇:
TypeScript webpack-dev-middleware.close函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap