update configs for webpack3

config/babel.js

@@ -1,9 +1,9 @@
 module.exports = {
 	presets: [
-		['es2015', {loose: true, modules: false}],
+		['es2015', { loose:true, modules:false }],
 		'stage-2'
 	],
 	plugins: [
-		['transform-react-jsx', {pragma: 'h'}]
+		['transform-react-jsx', { pragma:'h' }]
 	]
 };

config/setup.js

@@ -6,9 +6,7 @@ const Dashboard = require('webpack-dashboard/plugin');
 const Clean = require('clean-webpack-plugin');
 const Copy = require('copy-webpack-plugin');
 const HTML = require('html-webpack-plugin');
-
 const uglify = require('./uglify');
-const babel = require('./babel');
 
 const root = join(__dirname, '..');
 
@@ -18,25 +16,15 @@ module.exports = isProd => {
 		new Clean(['dist'], { root }),
 		new Copy([{ context: 'src/static/', from: '**/*.*' }]),
 		new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
+		new HTML({ template: 'src/index.html' }),
 		new webpack.DefinePlugin({
 			'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development')
-		}),
-		new HTML({ template: 'src/index.html' }),
-		new webpack.LoaderOptionsPlugin({
-			options: {
-				babel,
-				postcss: [
-					require('autoprefixer')({ browsers: ['last 3 version'] })
-				]
-			}
 		})
 	];
 
 	if (isProd) {
-		babel.presets.push('babili');
-
 		plugins.push(
-			new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
+			new webpack.LoaderOptionsPlugin({ minimize:true }),
 			new webpack.optimize.UglifyJsPlugin(uglify),
 			new ExtractText('styles.[hash].css'),
 			new SWPrecache({

config/styles.js

@@ -0,0 +1,23 @@
+const { join } = require('path');
+
+module.exports = [
+	{
+		loader: 'css-loader'
+	}, {
+		loader: 'postcss-loader',
+		options: {
+			plugins: [
+				require('autoprefixer')({
+					browsers: ['last 3 version']
+				})
+			]
+		}
+	}, {
+		loader: 'sass-loader',
+		options: {
+			includePaths: [
+				join(__dirname, 'src')
+			]
+		}
+	}
+]

config/webpack.js

@@ -1,13 +1,21 @@
 const { join } = require('path');
 const ExtractText = require('extract-text-webpack-plugin');
+const babelOpts = require('./babel');
+const styles = require('./styles');
 const setup = require('./setup');
 
-const dist = join(__dirname, '../dist');
+const dist = join(__dirname, '..', 'dist');
 const exclude = /(node_modules|bower_components)/;
 
 module.exports = env => {
 	const isProd = env && env.production;
 
+	if (isProd) {
+		babelOpts.presets.push('babili');
+	} else {
+		styles.unshift({ loader:'style-loader' });
+	}
+
 	return {
 		entry: {
 			app: './src/index.js',
@@ -25,20 +33,20 @@ module.exports = env => {
 			alias: {
 				// Run `npm install preact-compat --save`
 				// 'react': 'preact-compat',
-	 			// 'react-dom': 'preact-compat'
+				// 'react-dom': 'preact-compat'
 			}
 		},
 		module: {
 			rules: [{
 				test: /\.jsx?$/,
 				exclude: exclude,
-				loader: 'babel-loader'
+				loader: {
+					loader: 'babel-loader',
+					options: babelOpts
+				}
 			}, {
 				test: /\.(sass|scss)$/,
-				loader: isProd ? ExtractText.extract({
-					fallbackLoader: 'style-loader',
-					loader: 'css-loader!postcss-loader!sass-loader'
-				}) : 'style-loader!css-loader!postcss-loader!sass-loader'
+				use: isProd ? ExtractText.extract({ fallback:'style-loader', use:styles }) : styles
 			}]
 		},
 		plugins: setup(isProd),