Migration to webpack 2 for ExtractTextPlugin

I am trying to migrate from webpack 1 to 2 based on this guide. I have made most of the changes but struggling with ExtractTextPlugin. This is how it currently looks with webpack 1:

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|vendor)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'autoprefixer-loader')
      },
      {
        test: /\.styl$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader!stylus-loader')
      },
      {
        test: /\.(woff|woff2|ttf|eot)($|\?)/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /\.svg\?/,
        loader: 'url-loader?limit=100000&name=[path][name].[ext]'
      },
      {
        test: /\.(png|gif|jpg|svg)$/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
    ]
  }

changes i have made with webpack2:

module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|vendor)/,
        use:[{
            loader: 'babel-loader',
            query: { //
              presets: ['es2015', 'stage-0', 'react']
            }
          }
        ]
      },


      {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback:'style-loader',
      use: ['css-loader', 'postcss-loader','stylus-loader']
    })
  },
  {
    test: /\.styl$/,
    use: ExtractTextPlugin.extract({
      fallback:'style-loader',
        use: ['css-loader', 'postcss-loader','stylus-loader']
    })
  },


      {
        test: /\.(woff|woff2|ttf|eot)($|\?)/,
        use: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /\.svg\?/,
        use: 'url-loader?limit=100000&name=[path][name].[ext]'
      },
      {
        test: /\.(png|gif|jpg|svg)$/,
        use: 'file-loader?name=[path][name].[ext]'
      },
    ]
  }

But this is resulting in error. Where can I find help on migrating this section of webpack config.

Some of the errors i am seeing:

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./~/bootstrap/dist/css/bootstrap.css
Module build failed: ParseError: C:\temp\node_modules\bootstrap\dist\css\bootstrap.css:3586:71
   3582|   text-decoration: none;
   3583|   cursor: not-allowed;
   3584|   background-color: transparent;
   3585|   background-image: none;
   3586|   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-------------------------------------------------------------------------------^
   3587| }
   3588| .open > .dropdown-menu {
   3589|   display: block;

expected "indent", got ";"


ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./vendor/kendo-ui/styles/web/kendo.default.css
Module build failed: TypeError: C:\temp\kendo-ui\styles\web\kendo.default.css:862:27
   858| .k-state-disabled {
   859|   opacity: .7;
   860| }
   861| .k-ie8 .k-state-disabled {
   862|   filter: alpha(opacity=70);
----------------------------------^
   863| }
   864| .k-tile-empty.k-state-selected,
   865| .k-loading-mask.k-state-selected {

Cannot read property 'a' of undefined
    at ".k-ie8 .k-state-disabled " (C:\temp\kendo-ui\styles\web\kendo.default.css:861:2)

You're using stylus-loader for your .css as well. But not all CSS is valid stylus. You need to remove stylus-loader from the .css rule:

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader']
  })
},