使用Webpack Dev Middleware在Webpack中热重新加载CSS文件的最简单方法

我有一个用TypeScript编写的项目,我可以利用Webpack Hot Reload,在我的Node.js服务器中使用webpack-hot-middleware和webpack-dev-middleware库.

此外,我已经为我的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));