ExtractTextWebpackPluginは、変更がなくても常にファイルを出力します。

Question

Webpackを使用してクライアントサイドファイルをバンドルするプロジェクトがあります。 ExtractTextWebpackPluginを使用してCSSをバンドルしています。問題は、CSSバンドルがいつも再構築されたjavascriptファイルを編集しても、CSSの状態が全く変更されていないのにです。

CSSをバンドルするにはどうすればよいですか？ただし、CSSファイルに変更があった場合のみですか？私のWebPACKの設定から抽出

：

{ 
    test: /\.css$/, 
    use: ExtractTextPlugin.extract({ 
     use: 'css-loader' 
    }) 
}, 

...

plugins: [ 
    new ExtractTextPlugin(isDebug ? '[name].css' : '[name].[chunkhash].css') 
], 

Answer 1

ExtractTextPluginがcss拡張子を持つimport文を見たときに、それは自動的にそのcssファイルwhethereそれをのテキストContantをを抽出します変更または不一致

あなたが現在の構成ガイドを使用したいとExtractTextPluginは、CSSファイルを作成する必要はありません、あなたはあなたの中にそれらをインポートしている場合は、この

isDebug 
     ? { 
      test: /\.css$/, 
      use: ["style-loader", "css-loader"] 
      } 
     : { 
      test: /\.css$/, 
      use: ExtractTextPlugin.extract({ 
       use: "css-loader" 
      }) 
      } 

のような、より良いexperenceの何かのためにstyle-loaderとHMR(Hot Module Replacement)を使用し、その後デバッグするためにそれを使用している場合JavaScriptのあなたがそのcssファイル

、あなたのWebPACK configエントリセクションにCSSファイルを追加する場合のWebPACKは、カスタムを可能にするので、それは簡単だろうに変化がない場合、CSSファイル用のimport文を削除する必要が何とか続いimportを使用してファイルコマンドの引数とすることができますあなたのWebPACKの設定ファイルにfunctionをエクスポートすることで、これはあなたがしたくないときは、通常--env.includeCssとし、--env.includeCssすることなく、この

webpack --config ./webpack.config.prod.js --env.includeCss 
//notice --env.includeCss witch will set env.includeCss as true 

ランのようなコマンド引数によってenv.includeCssを渡すことができobject

//webpack.config.js 

module.exports = function(env) { 
    return { 
     entry: { 
     main: env.includeCss 
          ? 
           ["./src/index.js", "./src/main.css"] //build with css 
          : ["./src/index.js"] //build without css 
     }, 
     . 
     . 
     . 
     . 
    } 
} 

のinstedコンパイルCSSファイル

Answer 2

あなたの質問には直接関係しませんが、私は抽出されたCSSに[chunkhash]を使用していることに気付きました。 CSSファイルの内容を変更していない場合でも、CSS名が変更されます。

[contenthash]を代わりに使用してください。

https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/#setting-up-hashing

あなたがExtractTextPluginを使用している場合は、[contenthash]を使用する必要があります。この方法では、コンテンツが変更された場合にのみ生成されたアセットが無効になります。