Webpackウォッチビルドコンパイル

Question

webpack --progress --colors --watchを実行してCSSファイルを編集すると、webpackはCSSとJSバンドルをビルドします。

cssファイルが変更された場合にbundle.cssだけをビルドすることは可能ですか？ jsファイルも同じです。

ありがとうございました！

Answer 1

はいいいえHRMホットモジュールの交換。変更された部分のみをビルドしますが、アプリケーション全体をビルドできない場合があります。

Answer 2

はい、extract-textプラグインを使用して、jsバンドルからCSSを取得できます。だからあなたは自分のバンドルにCSSを持っています。 watchmodeは、あなたが変更したバンドルの部分だけを再構築します。変更を行うには、通常は1秒程度しかかかりません。

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
module.exports = { 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: ExtractTextPlugin.extract({ 
       fallbackLoader: "style-loader", 
       loader: "css-loader" 
      }) } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("styles.css") 
    ] 
} 

これにより、すべてのCSSがstyle.cssバンドルになります。 エントリポイントごとに独自のcssバンドルとしてさらにモジュール化することができます。