extract-text-webpack-plugin cssを抽出しない

Question

CommonChunkPluginの助けを借りてchunkを作成したとき、extract-text-webpack-pluginは着陸チャンクからCSSを抽出しません。何か案は？

config: { 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     chunks: [ 
      'vzr', 
      'vzrProduct', 
      'emptyProduct' 
     ], 
     async: 'landings' 
    }), 
    new ExtractTextPlugin({ 
     filename: '[name].[contenthash].css', 
     allChunks: true 
    }) 
    ] 
} 

Answer 1

IはminChunkに機能を追加し、問題が解決されます。 [...] ``の代わりにプラグインの：：{...} `CommonChunkPluginは、CSSと少ないモジュール

config: { 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     chunks: [ 
      'kaskoLanding', 
      'kaskoLandingProduct', 
      'kaskoCalculator', 
      'kaskoCalculatorProduct', 
      'osagoCalculator', 
      'osagoCalculatorProduct', 
      'vzr', 
      'vzrProduct', 
      'emptyProduct' 
     ], 
     minChunks: (module, count) => { 
      if (module.resource && (/^.*(css|less)$/).test(module.resource)){ 
       return false; 
      } 

      return count >= 9; 
     }, 
     async: 'landings' 
    }), 
    new ExtractTextPlugin({ 
     filename: '[name].[contenthash].css', 
     allChunks: true 
    }) 
] 

}

Answer 2

JavascriptをObjectsはkeyとvalueコロンで区切られている必要があります。あなたの場合、plugins: {}があり、これにはkeysと呼ばれるかもしれない一連の関数が挿入されていますが、コロンとコンマが続くのはvalueです。

thispluginsは、objectではなく、arrayの値です。したがって 、代わりに：

config: { 
    plugins: { 
    new webpack.optimize.CommonsChunkPlugin({ 
     chunks: [ 
     'vzr', 
     'vzrProduct', 
     'emptyProduct' 
     ], 
     async: 'landings' 
    }), 
    new ExtractTextPlugin({ 
    filename: '[name].[contenthash].css', 
    allChunks: true 
    }) 
} 

むしろ

}

：

config: { 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     chunks: [ 
     'vzr', 
     'vzrProduct', 
     'emptyProduct' 
     ], 
     async: 'landings' 
    }), 
    new ExtractTextPlugin({ 
     filename: '[name].[contenthash].css', 
     allChunks: true 
    }) 
    } 
]