TypeScript webpack-dev-middleware類代碼示例

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

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

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

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

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

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}`)