title: Simplest way to hot reload a CSS file in Webpack using Webpack Dev Middleware
body: <p>I have a project written in TypeScript that I can take advantage of Webpack Hot Reload, using both <code>webpack-hot-middleware</code> and <code>webpack-dev-middleware</code> libraries in my Node.js server.</p>
  
  <p>Also, I already have all the build steps configured for my Stylus code (incremental builds with Gulp), that generates one single CSS file in my public directory.</p>
  
  <p>So, now I would like to take advantage of Webpack's hot reloading for CSS as well, since I already have that for my TypeScript stuff, but I don't want it to build my CSS files, since I already have something great for that. Ideally, I only want to have Webpack hot reloading my single CSS file everytime it changes. What is the simplest and best way to achieve that?</p>
  
  <p>My current configuration file looks like this:</p>
  
  <pre><code>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()
    ];
  };
  </code></pre>
  
  <p>And then, I use Webpack Hot Middleware and Webpack Dev Middleware like this:</p>
  
  <pre><code>const webpackConfig = require('../webpack.config');
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
  app.use(webpackHotMiddleware(compiler));
  </code></pre>