Updated webpack config: added chunking, fixed environment variables

webpack.config.js

@@ -1,45 +1,40 @@
 // Global imports
-var webpack = require('webpack'),
-    path    = require('path');
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // Paths
-var entry           = './src/js/app.js',
-    includePath     = path.join(__dirname, 'src/js'),
-    nodeModulesPath = path.join(__dirname, 'node_modules'),
-    outputPath      = path.join(__dirname, 'src/public/assets/js');
+const entry = './src/js/app.js';
+const includePath = path.join(__dirname, 'src/js');
+const nodeModulesPath = path.join(__dirname, 'node_modules');
+let outputPath = path.join(__dirname, 'src/public/assets/js');
 
-// Environment
-var PROD = JSON.parse(process.env.NODE_ENV || 0);
-
-// Dev environment
-var env = 'dev',
-    time = Date.now(),
-    devtool = 'eval',
-    mode = 'development',
-    stats = 'minimal',
-    plugins = [
-      //new webpack.NoErrorsPlugin(),
+module.exports = env => {
+  // Dev environment
+  let devtool = 'eval';
+  let mode = 'development';
+  let stats = 'minimal';
+  let plugins = [
     new webpack.DefinePlugin({
-        __ENV__: JSON.stringify(env),
-        ___BUILD_TIME___: time
+      __ENV__: JSON.stringify(env.NODE_ENV)
     })
   ];
 
-// Production environment
-if(PROD) {
-  env = 'prod';
+  // Prod environment
+  if (env.NODE_ENV === 'prod') {
     devtool = 'hidden-source-map';
     mode = 'production';
     stats = 'none';
-  outputPath = __dirname + '/build/public/assets/js';
-}
+    outputPath = `${__dirname}/build/public/assets/js`;
+  }
 
-console.log('Webpack build - ENV: ' + env + ' V: ' + time);
-console.log('    - outputPath ', outputPath);
-console.log('    - includePath ', includePath);
-console.log('    - nodeModulesPath ', nodeModulesPath);
+  console.log('Webpack build -');
+  console.log(`    - ENV: ${env.NODE_ENV}`);
+  console.log(`    - outputPath  ${outputPath}`);
+  console.log(`    - includePath ${includePath}`);
+  console.log(`    - nodeModulesPath: ${nodeModulesPath}`);
 
-module.exports = {
+  return {
     // Here the application starts executing
     // and webpack starts bundling
     entry: [
@@ -57,7 +52,8 @@ module.exports = {
       filename: 'app.js'
     },
 
-  mode: mode,
+    // Webpack 4 mode helper
+    mode,
 
     // configuration regarding modules
     module: {
@@ -80,6 +76,14 @@ module.exports = {
           },
           include: includePath,
           exclude: nodeModulesPath,
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            'style-loader',
+            'css-loader',
+            'sass-loader'
+          ]
         }
       ]
     },
@@ -87,7 +91,6 @@ module.exports = {
     // options for resolving module requests
     // (does not apply to resolving to loaders)
     resolve: {
-
       // directories where to look for modules,
       modules: [
         'node_modules',
@@ -99,19 +102,36 @@ module.exports = {
     },
 
     performance: {
-    hints: 'warning' // enum
+      hints: 'warning'
     },
 
     // lets you precisely control what bundle information gets displayed
-  stats: stats,
+    stats,
 
     // enhance debugging by adding meta info for the browser devtools
     // source-map most detailed at the expense of build speed.
-  devtool: devtool, // enum
+    devtool,
 
     devServer: {
       contentBase: 'src/public'
     },
 
-  plugins: plugins
+    plugins: plugins.concat(new HtmlWebpackPlugin({
+      template: './src/html/index.html',
+      filename: '../../index.html',
+    })),
+
+    optimization: {
+      runtimeChunk: 'single',
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            test: /[\\\/]node_modules[\\\/]/,
+            name: 'vendors',
+            chunks: 'all'
+          }
+        }
+      }
+    }
+  };
 };