Slow Small Webpack 2 Build - Tree Shaking - Sass - Chunking - sass

Question

I've put together a very basic webpack 2 build, but it seems to be slow for the project size. The three things I wanted have were:
Chunking (js & scss)
SCSS compiling
Tree Shaking
Webpack seemed to be a good choice for being able to do these things. I've been using Gulp and Rollup, but the SCSS/Chunking along side of the tree shaking is a nice thing.
It takes around 4000 - 5000ms to compile the build, which wouldn't be the end of the world except the project is so small, so I'm worried about that becoming much larger as a project grows.
I've tried a couple things to improve the speed.
resolve : {
root: path.resolve(__dirname,'src')
}
This did help, reducing the time by a couple hundred ms, so that was great. I tried to take this further by also resolving alias, but that didn't really show any gains as far as I could tell.
I set devTool to eval as well. Beyond this I haven't really been able to improve things, but I'm sure it's something in the way I've set things up. It's worth noting that while 'webpack' compiles the build, running the webpack-dev-server doesn't. It's starts up, hangs on the compile and then crashes. This may or may not be a separate issue, but I thought it was worth including.
I'm also using ES6 System.import for chunking (just as a note).
I put the project up on git, so feel free to pull it down: https://github.com/loriensleafs/trying-out-webpack2
The webpack.config.js is:
var path = require('path'),
webpack = require('webpack'),
CleanPlugin = require('clean-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
production = process.env.NODE_ENV === 'production';
var plugins = [
new ExtractTextPlugin({ filename: 'bundle.css', allChunks: true}),
new webpack.optimize.CommonsChunkPlugin({
name : 'vendor',
children : true,
minChunks : 2
})
];
if (production) {
plugins = plugins.concat([
new CleanPlugin('builds'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 51200, // ~50kb
}),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
},
}),
new webpack.DefinePlugin({
__SERVER__ : !production,
__DEVELOPMENT__ : !production,
__DEVTOOLS__ : !production,
'process.env': {
BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
}
})
]);
}
module.exports = {
// debug : !production,
devTool : production ? false : 'eval',
entry : './src',
output : {
path : 'builds',
filename : 'bundle.js',
chunkFilename : 'chunk.js',
publicPath : 'builds/'
},
resolve : {
root: path.resolve(__dirname,'src')
},
plugins : plugins,
module : {
loaders: [
{
test : /\.(png|gif|jpe?g|svg)$/i,
loader : 'url',
query : {
limit: 10000
}
},
{
test : /\.js$/,
include : /src/,
exclude : /node_modules/,
loader : 'babel'
},
{
test : /\.scss$/,
include : /src/,
exclude : /node_modules/,
loader : ExtractTextPlugin.extract(['css','sass'])
},
{
test : /\.html$/,
loader : 'html'
}
]
}
};
Thanks for any advice/help folks have on this. If there's any other helpful info I can post on here please let me know.