La forma más sencilla de recargar en caliente un archivo CSS en Webpack usando Webpack Dev Middleware

Tengo un proyecto escrito en TypeScript que puedo aprovechar Webpack Hot Reload, utilizando las bibliotecas webpack-hot-middleware y webpack-dev-middleware en mi servidor Node.js.

Además, ya tengo todos los pasos de compilación configurados para mi código Stylus (compilaciones incrementales con Gulp), que genera un solo archivo CSS en mi directorio público.

Por lo tanto, ahora también me gustaría aprovechar la recarga en caliente de Webpack para CSS, ya que ya tengo eso para mis cosas de TypeScript, pero no quiero que compile mis archivos CSS, ya que tengo algo excelente para eso. Idealmente, solo quiero que Webpack vuelva a cargar mi único archivo CSS cada vez que cambie. ¿Cuál es la forma más simple y mejor de lograrlo?

Mi archivo de configuración actual se ve así:

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

Y luego, uso Webpack Hot Middleware y Webpack Dev Middleware como este:

const webpackConfig = require('../webpack.config');
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
Mejor respuesta
No creo que deba hacer nada especial para que HMR se ocupe de los archivos css, aparte de la configuración que ya tiene. Pero Webpack necesita ver su css como una dependencia de su aplicación. Podría requerir (o importar) uno o más archivos css en su javascript, y al hacerlo, se convierte en parte del árbol de dependencias de la aplicación.

En una configuración estándar, debería hacer coincidir los archivos .css para usar el cargador css y hacer que se transfieran antes de emitirlos a la salida, pero como no quiere que Webpack toque su css, podría usar el cargador de archivos. Webpack aún tomará el archivo como una dependencia, pero simplemente lo copiará en el directorio de salida sin tocar su contenido.

Ponga algo como: require (“file! ./ styles.css”); en el archivo principal de su aplicación. Esto le indicará que use el cargador de archivos en el archivo css. Necesitará instalar el cargador de archivos con NPM ya que no es parte de Webpack.

Por favor indique la dirección original:La forma más sencilla de recargar en caliente un archivo CSS en Webpack usando Webpack Dev Middleware - Código de registro