Il modo più semplice per ricaricare un file CSS in Webpack utilizzando Webpack Dev Middleware

Question

Ho un progetto scritto in TypeScript che posso sfruttare Webpack Hot Reload, utilizzando entrambe le librerie webpack-hot-middleware e webpack-dev-middleware nel mio server Node.js.

Inoltre, ho già tutti i passaggi di configurazione configurati per il mio codice Stylus (build incrementali con Gulp), che genera un singolo file CSS nella mia directory pubblica.

Quindi, ora mi piacerebbe approfittare del caldo ricarico di Webpack anche per CSS, dato che ho già questo per il mio materiale TypeScript, ma non voglio che costruisca i miei file CSS, dato che ho già qualcosa ottimo per quello. Idealmente, voglio solo che Webpack ricarichi il mio singolo file CSS ogni volta che cambia. Qual è il modo più semplice e migliore per raggiungerlo?

mio file di configurazione attuale si presenta così:

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

E poi, io uso Webpack calda Middleware e Webpack Dev Middleware come questo:

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

Answer 1

Non credo che devi fare qualcosa di speciale per HMR per gestire i file css a parte la configurazione che hai già. Ma Webpack ha bisogno di vedere il tuo css come una dipendenza della tua applicazione. Puoi richiedere (o importare) uno o più file css nel tuo javascript, e così facendo diventa parte dell'albero delle dipendenze dell'applicazione.

In una configurazione standard si dovrebbero abbinare i file .css per usare il css-loader e averlo transpiled prima di emetterlo nell'output, ma poiché non si desidera che Webpack tocchi il proprio css, si potrebbe usare il caricatore di file anziché. Webpack continuerà a raccogliere il file come dipendenza, ma semplicemente lo copierà nella directory di output senza toccarne il contenuto.

Inserire qualcosa come: require("file!./styles.css"); nel file principale dell'applicazione. Questo lo istruirà a usare il caricatore di file sul file css. Sarà necessario installare file-loader con NPM poiché non fa parte di Webpack.