1 files changed, 31 insertions, 27 deletions
diff --git a/webpack.config.js b/webpack.config.js
index 0bf982a..f882566 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,8 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-const js = {
+module.exports = {
   entry: './src/client/react/index.js',
   output: {
     path: path.resolve(__dirname, 'src/client/static'),
@@ -11,38 +10,43 @@ const js = {
   module: {
     rules: [
       {
-        test: [/\.js$/, /\.jsx$/],
+        test: /\.js$/,
         exclude: [/node_modules/],
         loader: 'babel-loader',
-        options: { presets: ['es2015', 'react', 'stage-2'] },
+        options: {
+          presets: [
+            // Covert code to an older version of JavaScript. This allows us to
+            // use newer syntax (like classes) without having to working if it
+            // will work in IE9.
+            'es2015',
+            // This converts the react code syntactical surger to their "plain"
+            // javascript equivalents.
+            // See https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects
+            'react',
+            // This allows us the use newer JavaScript features that are still
+            // in the working. Examples are the spread operator (https://babeljs.io/docs/plugins/transform-object-rest-spread/),
+            // and class propreties (https://babeljs.io/docs/plugins/transform-class-properties/)
+            'stage-2',
+          ],
+        },
       },
-    ],
-  },
-  plugins: [
-    // Only load the dutch local for moment.js
-    // https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack#25426019
-    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nl/),
-  ],
-};
-
-const style = {
-  entry: './src/client/style/index.scss',
-  output: {
-    path: path.resolve(__dirname, 'src/client/static'),
-    filename: 'bundle.css',
-  },
-  module: {
-    rules: [
       {
-        test: [/\.scss$/],
-        exclude: [/node_modules/],
-        loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
+        // This allows us to import .scss files. When importing an .scss file
+        // from JavaScript, it will automatically be converted to normal css and
+        // injected to the head on page load.
+        test: /\.scss/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ],
       },
     ],
   },
   plugins: [
-    new ExtractTextPlugin('bundle.css'),
+    // Only load the dutch local for moment.js. This is simply to reduce the
+    // side of the bundle that we send down to the browser.
+    // https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack#25426019
+    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /nl/),
   ],
 };
-
-module.exports = [js, style];