webpack2でExtractTextPluginのエラーを解決する方法を教えて下さい。

webpack2のExtractTextPluginを使用するとエラーが出てしまうのですが、
解決方法がわからず、困っています。
解決方法を教えていただきたいです。

// webpack.config.js

require('babel-polyfill');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  context: __dirname,
  entry: {
    'client': './src/client/index.js'
  },
  output: {
    path: '../app/assets/javascripts',
    filename: '[name]/bundle.js'
  },
  
  module: {
    loaders: [
        {
          test: /^((?!\.global).)*(scss|css)$/,
          loader: ExtractTextPlugin.extract(
            'style-loader',
            'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss-loader',
            'resolve-url',
            'sass'
          )
        },
        {
          test: /\.global.(scss|css)$/,
          loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'resolve-url', 'sass')
        },
        { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' },
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
        { test: /\.(jpg|png|gif)$/, loader: 'url-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new ExtractTextPlugin('../stylesheets/[name]/bundle.scss', { ignoreOrder: true } )
  ]
};

エラー内容

configuration has an unknown property 'postcss'. These properties are valid:
client.1 |    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
client.1 |    For typos: please correct them.
client.1 |    For loader options: webpack 2 no longer allows custom properties in configuration.
client.1 |      Loaders should be updated to allow passing options via loader options in module.rules.
client.1 |      Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
client.1 |      plugins: [
client.1 |        new webpack.LoaderOptionsPlugin({
client.1 |          // test: /\.xxx$/, // may apply this only for some modules
client.1 |          options: {
client.1 |            postcss: ...
client.1 |          }
client.1 |        })
client.1 |      ]
client.1 |  - configuration.output.path: The provided value "../app/assets/javascripts" is not an absolute path!
client.1 |  - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
client.1 |    object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
client.1 |  - configuration.resolve.extensions[0] should not be empty.

行動規範の内容に同意します

回答1件

ベストアンサー

エラーを参考にpostcssから削除して、順番に検証してみるといいと思いますが、2であれば書き方が異なるような気もします。

Migrating from v1 to v2

自分の場合は、loaderとoptionsを分離する記法を使用しています。
長くなるけどわかりやすいので。。。

javascript
1:（参考例）
2const PostcssCssnext = require('postcss-cssnext');
3:
4    rules: [
5      {
6        test: /\.css$/,
7        use: ExtractTextPlugin.extract({
8          fallback: 'style-loader',
9          use: [
10            {
11              loader: 'css-loader',
12              options: {
13                sourceMap: true,
14                importLoaders: 1
15              }
16            },
17            {
18              loader: 'postcss-loader',
19              options: {
20                plugins: () => [
21                  PostcssCssnext({
22                    browsers: ['last 2 versions'],
23                    features: {
24                      rem: true
25                    }
26                  })
27                ]
28              }
29            }
30          ]
31        })
32      },
33