TypeScript webpack-dev-middleware类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

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

示例1: webpack

import * as express from 'express';
import * as webpack from 'webpack';
import * as webpackDevMiddleware from 'webpack-dev-middleware';

const compiler = webpack({});

let webpackDevMiddlewareInstance = webpackDevMiddleware(compiler);

webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, {
	noInfo: false,
	quiet: false,
	lazy: true,
	watchOptions: {
		aggregateTimeout: 300,
		poll: true,
	},
	publicPath: '/assets/',
	index: 'index.html',
	headers: {
		'X-Custom-Header': 'yes'
	},
	stats: {
		colors: true,
	},
	reporter: null,
	serverSideRender: false,
});

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

开发者ID:ArtemZag，项目名称:DefinitelyTyped，代码行数:30，代码来源:webpack-dev-middleware-tests.ts

示例2: express

import * as express from 'express';
import * as webpack from 'webpack';
import { resolve } from 'path';
import config from '../webpack.config';
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}`);
  }
});

开发者ID:TienSFU25，项目名称:graphical-memories，代码行数:32，代码来源:startServer.ts

示例3: Webpack

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());
      }
    });
  });
};

开发者ID:StrikeForceZero，项目名称:react-boilerplate，代码行数:33，代码来源:frontendMiddleware.ts

示例4: default

export default (compiler: any, publicPath: any) => {
  debug('Enable webpack dev middleware.')

  const middleware = WebpackDevMiddleware(compiler, {
    publicPath,
    // contentBase: path.join(__dirname, '..', '..', 'src'),
    hot: true,
    quiet: false,
    noInfo: false,
    lazy: false,
    stats: false,
  })

  return async(ctx: any, next: any) => {
    let hasNext = await applyServiceMiddleware(middleware, ctx.req, {
      end: (content: any) => (ctx.body = content),
      setHeader: function() {
        ctx.set.apply(ctx, arguments)
      },
    })

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

开发者ID:stefaniepei，项目名称:react-redux-scaffold，代码行数:26，代码来源:webpack-dev.ts

示例5: express

> = (context: interfaces.Context) => (app?: express.Application) => {
  if (!app) {
    app = express();
  }
  context.container.get<interfaces.Factory<express.Application>>(
    registry.ExpressConfig
  )(app);
  useContainer(context.container);
  useExpressServer(app, {
    routePrefix: '/api',
    controllers: [
      CardSetController
    ],
    development: true,
    validation: { validationError: { target: false, value: false } }
  });
  app.use(historyApiFallback());
  app.use(
    webpackMiddleware(webpack(webpackDevConfig), {
      publicPath: '/',
      index: 'index.html',
      stats: {
        colors: true
      }
    })
  );
  context.container.get<interfaces.Factory<express.Application>>(
    registry.ExpressErrorConfig
  )(app);

  return app;
};

开发者ID:patrickhousley，项目名称:xyzzy-mean，代码行数:32，代码来源:express-dev.ts

示例6: enableWebpackHMR

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

开发者ID:efossier，项目名称:MLB-Redesign，代码行数:21，代码来源:app.dev.ts

示例7: startApp

if (process.env.NODE_ENV === 'production') {
  startApp()
} else {
  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}`)

开发者ID:ghmoore，项目名称:desktop，代码行数:30，代码来源:start.ts

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