Performance Issue with Webpack
<p>I'm trying to switch sass building to Webpack in order to remove gulp (and maintain less tools).</p>

<p>The JS build in webpack is fast, and I have no problem about it.</p>

<p>My gulp scss build is really fast too, and take less than a second.</p>

<pre><code>gulp.task('css', function(){
    return gulp.src('styles/main.scss')
        .pipe(sass({ outputStyle: "compressed" }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['&gt; 0%'],
            cascade: false
        }))
        .pipe(gulp.dest('public/css'));
});
</code></pre>

<p>However, I try to reimplement the same in Webpack and I takes 10 secondes, the first build but also the watch process ! </p>

<p>Here is the webpack code: </p>

<pre><code>{
  entry: {
    app: path.resolve(__dirname, 'styles/main.scss'),
    // vendor: ['vendor'],
  },
  output: {
    path: path.resolve(__dirname,'./public/css'),
    filename: 'main.css'
  },
  devtool: "inline-eval-cheap-source-map",
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['postcss-loader', 'resolve-url-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['css-loader', 'postcss-loader', 'resolve-url', 'sass-loader?sourceMap']
      },
      {
        test: /\.(ttf|eot|svg|png|jpg|woff2|woff|jpeg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'ignore-loader' // old: 'file-loader'
      }
    ],
  },
  postcss: [ autoprefixer({
    browsers: ['&gt; 0%'], // ['last 2 versions'],
    cascade: false
  })
}];
</code></pre>

<p>Why does the process is 10x slower? What can I do to speed it up? Thanks!</p>