Webpack Dev Middlewareを使用してWebpackのCSSファイルをホットリロードする最も簡単な方法

Question

私は、WebサービスのHot Reloadを利用できるTypeScriptで書かれたプロジェクトを、Node.jsサーバにwebpack-hot-middlewareとwebpack-dev-middlewareライブラリを使用しています。

また、パブリックディレクトリに1つのCSSファイルを生成するスタイラスコード（Gulpを使用したインクリメンタルビルド）用にすべてのビルドステップが設定されています。

WebpackのCSSのホットリロードを利用したいと思っています。すでに私のタイプスクリプトのものを持っているからですが、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のホットミドルウェアおよびWebPACKのDevのミドルウェアを使用します。

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

私はあなたがする必要があるとは思いませんあなたが既に持っている設定とは別にcssファイルを扱うHMRのための特別なもの。しかし、Webpackはあなたのアプリケーションの依存としてあなたのCSSを見なければなりません。あなたは、あなたのjavascriptに1つ以上のcssファイルを必要（またはインポート）することができます。そうすることで、それはアプリケーション依存ツリーの一部になります。

標準設定では、css-loaderを使用して出力に出力する前に.cssファイルをマッチさせますが、WebpackがあなたのCSSに触れないようにするため、ファイルローダー代わりに。 Webpackは依然として依存関係としてファイルを取得しますが、その内容に触れることなく単に出力ディレクトリにコピーします。

アプリケーションのメインファイルにrequire("file!./styles.css");のように入力してください。これは、cssファイルでファイルローダーを使用するように指示します。 Webpackには含まれていないので、file-loaderをNPMにインストールする必要があります。