Webpack 2にextractTextPluginプラグインとpostCssプラグインを使用

Question

webpack v1からv2に移行しています。私はwebpack.config.jsを更新するために、公式ドキュメントを追っ：

... 
module: { 
    rules: [ 
     { 
      test: /\.css$/, 
      use: extractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]', 
        'postcss-loader' 
       ], 
      }), 
      exclude: [...] 
     }, 
     { 
      test: /\.css$/, 
      use: extractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: 'css-loader', 
      }), 
      include: [...] 
     } 
    ] 
}, 
... 
/** 
* postcss: [ 
* nested(), 
* autoprefixer(), 
* values 
* ] 
*/ 

私の問題は、postcssプラグイン（ネストされた、autoprefixer、値）です。 Webpack 2はカスタムプロパティをこれ以上サポートしておらず、optionsの使用を提案しました。

私はoptionsとplugins:() => [nested, autoprefixer, values]を試しましたが、動作させることはできません。

これを行うには適切な方法はありますか？ありがとう。

Answer 1

オプションを使用してオブジェクトをエクスポートするpostcss.config.jsファイルを使用することをお勧めします（Postcss usage参照）。

module.exports = { 
    plugins: [ 
    nested(), 
    autoprefixer(), 
    values 
    ] 
} 

しかし、あなたがしたい場合は、（ Postcss optionsに示すように）のWebPACKの設定でそれを直接指定することができます：あなたの設定は、（import文を省略）のようになります

{ 
    test: /\.css$/, 
    use: extractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]', 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins:() => [nested(), autoprefixer(), values] 
     } 
     } 
    ] 
    }) 
    exclude: [...] 
}, 

注意オプションはローダー自体であり、ルール全体ではありません。