Самый простой способ горячей перезагрузки файла CSS в Webpack с использованием промежуточного программного обеспечения Webpack Dev.

У меня есть проект, написанный на TypeScript, в котором я могу воспользоваться преимуществами горячей перезагрузки Webpack, используя библиотеки webpack-hot-middleware и webpack-dev-middleware на моем сервере Node.js.

Кроме того, у меня уже есть все шаги сборки, настроенные для моего кода Stylus (инкрементные сборки с помощью Gulp), который создает один единственный файл CSS в моем общедоступном каталоге.

Итак, теперь я хотел бы воспользоваться преимуществами горячей перезагрузки Webpack и для CSS, так как у меня уже есть это для моего материала TypeScript, но я не хочу, чтобы он создавал мои файлы CSS, так как у меня уже есть что-то отличное для этого. В идеале я хочу, чтобы Webpack перезагружал только мой единственный файл CSS каждый раз, когда он изменяется. Каков самый простой и лучший способ добиться этого?

Мой текущий файл конфигурации выглядит так:

const webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './src/client/index.tsx'
  ],
  output: {
    path: '/public/js/',
    filename: 'bundle.js',
    publicPath: '/js/'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ];
};

Затем я использую Webpack Hot Middleware и Webpack Dev Middleware следующим образом:

const webpackConfig = require('../webpack.config');
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
app.use(webpackHotMiddleware(compiler));