title: Updating WebPack 1 to WebPack 3
body: <p>I really like the concept behind <a href="https://github.com/juliancwirko/react-redux-webpack-meteor" rel="nofollow noreferrer">this boilerplate</a> of separating the frontend from the backend.
  I am trying to update the whole boilerplate starting from WebPack.
  The version included in the boilerplate is WebPack 1.
  I tried upgrading it to version 3. </p>
  
  <p>Apparently I only need to upgrade it to the version 2 since upgrading to version 3 is smooth and done through the command line via updating WebPack only.
  I followed mainly the <a href="https://webpack.js.org/guides/migrating" rel="nofollow noreferrer">official guide</a> and some other separate ressources of course to try to modify the 
  <strong><em>webpack.config.js</em></strong> file.
  I ended up with the followong <strong><em>webpack.config.js</em></strong> file:</p>
  
  <p>Still when I run npm start fron the client side I get the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/5ItSU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5ItSU.png" alt="Error Output"></a></p>
  
  <p>This is the debug file from npm.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var sGrid = require('s-grid');
  var rupture = require('rupture');
  var autoprefixer = require('autoprefixer');
  var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    devtool: 'eval',
    entry: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './app/App.js'
    ],
    output: {
      pathinfo: true,
      path: path.resolve(__dirname, 'public'),
      filename: 'bundle.js',
      publicPath: 'http://localhost:3000/'
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
       options: {
         //postcss: [autoprefixer],
         context: __dirname,
         minimize: true
         //stylus: [sGrid, rupture]
       }
      }),
      new HtmlWebpackPlugin({
        title: 'React with Webpack and Redux - Meteor as a backend only!',
        template: './index_template.ejs',
        inject: 'body'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true, //in WebPack 2 it defaults to false so need to be explicitly set.
        compress: {
          warnings: true
        }
      })
    ],
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: ['babel-loader'] //'use' and 'loaders' are interchangeable
        },
        {
          test: /\.css$/, //scss??
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 2,
                localIdentName: '[name]__[local]__[hash:base64:5]',
                //plugins: autoprefixer,//WTF??
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function(){
                  return [autoprefixer]
                }
              }
            }
          ]
          //loader: 'style!css?sourceMap&amp;importLoaders=2&amp;localIdentName=[name]__[local]__[hash:base64:5]!postcss'
        },
        {
          test: /\.styl$/,
          exclude: /(node_modules|bower_components)/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options:{
                sourceMap: true,
                modules: true,
                importLoaders: 2,
                localIdentName: '[name]__[local]__[hash:base64:5]'
                //plugins: sGrid, rupture
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function(){
                  return [autoprefixer]
                }
              }
            },
            {
              loader: 'stylus-loader',
              options: {
                plugins: function(){
                  return [sGrid, rupture]
                }
              }
            }
          ]
          //  loader: 'style!css?sourceMap&amp;modules&amp;importLoaders=2&amp;localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader'
        },
        {
          test: /\.(png|jpg)$/,
          exclude: /(node_modules|bower_components)/,
          use: [
            {
              loader: 'url-loader',
              options:{
                name: 'images/[name].[ext]',
                limit: '8192' //Maybe INT????
              }
            }
          ]
          //loader: 'url-loader?name=images/[name].[ext]&amp;limit=8192'
        }
      ]
    },
    resolve: {
      //root: path.join(__dirname, '..', 'app'),
      modules: [
        path.join(__dirname, "app"), // 2 or 3 arguments??
        "node_modules"
      ],
      extensions: ['.js', '.jsx', '.json', '.css', '.styl', '.png', '.jpg', '.jpeg', '.gif'],
      enforceModuleExtension: false
    },
  /*  stylus: function () {
      return [sGrid, rupture]
    },*/
  /*  postcss: function () {
      return [autoprefixer];
    }*/
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would highly appreciate any kind of help on this issue.</p>