Migrated webpack config to 4.0 version, restructured, added more options

webpack.config.js

@@ -12,12 +12,13 @@ var entry           = './src/js/app.js',
 var PROD = JSON.parse(process.env.NODE_ENV || 0);
 
 // Dev environment
-var env     = 'dev',
-    time    = Date.now(),
+var env = 'dev',
+    time = Date.now(),
     devtool = 'eval',
-    debug   = true,
+    mode = 'development',
+    stats = 'minimal',
     plugins = [
-      new webpack.NoErrorsPlugin(),
+      //new webpack.NoErrorsPlugin(),
       new webpack.DefinePlugin({
         __ENV__: JSON.stringify(env),
         ___BUILD_TIME___: time
@@ -28,20 +29,9 @@ var env     = 'dev',
 if(PROD) {
   env = 'prod';
   devtool = 'hidden-source-map';
-  debug = false;
+  mode = 'production';
+  stats = 'none';
   outputPath = __dirname + '/build/public/assets/js';
-
-  uglifyOptions = {
-    sourceMap: false,
-    mangle: true,
-    compress: {
-      drop_console: true
-    },
-    output: {
-      comments: false
-    }
-  };
-  plugins.push(new webpack.optimize.UglifyJsPlugin(uglifyOptions));
 }
 
 console.log('Webpack build - ENV: ' + env + ' V: ' + time);
@@ -50,35 +40,78 @@ console.log('    - includePath ', includePath);
 console.log('    - nodeModulesPath ', nodeModulesPath);
 
 module.exports = {
-  stats: {
-    colors: true
-  },
-  debug: debug,
-  devtool: devtool,
-  devServer: {
-    contentBase: 'src/public'
-  },
+  // Here the application starts executing
+  // and webpack starts bundling
   entry: [
     entry
   ],
+
+  // options related to how webpack emits results
   output: {
+    // the target directory for all output files
+    // must be an absolute path (use the Node.js path module)
     path: outputPath,
+    // the url to the output directory resolved relative to the HTML page
     publicPath: 'assets/js',
+    // the filename template for entry chunks
     filename: 'app.js'
   },
+
+  mode: mode,
+
+  // configuration regarding modules
   module: {
-    loaders: [
+    // rules for modules (configure loaders, parser options, etc.)
+    rules: [
       {
+        // these are matching conditions, each accepting a regular expression or string
+        // test and include have the same behavior, both must be matched
+        // exclude must not be matched (takes preference over test and include)
+        // Best practices:
+        // - Use RegExp only in test and for filename matching
+        // - Use arrays of absolute paths in include and exclude
+        // - Try to avoid exclude and prefer include
         test: /\.js?$/,
-        loader: 'babel-loader',
-        query: {
-          presets: ['es2015']
+        // the loader which should be applied, it'll be resolved relative to the context
+        // -loader suffix is no longer optional in webpack2 for clarity reasons
+        // see webpack 1 upgrade guide
+        use: {
+          loader: 'babel-loader',
         },
-        include: [
-          includePath, nodeModulesPath
-        ]
+        include: includePath,
+        exclude: nodeModulesPath,
       }
     ]
   },
+
+  // options for resolving module requests
+  // (does not apply to resolving to loaders)
+  resolve: {
+
+    // directories where to look for modules,
+    modules: [
+      'node_modules',
+      path.resolve(__dirname, 'app')
+    ],
+
+    // extensions that are used
+    extensions: ['.js', '.json', '.css'],
+  },
+
+  performance: {
+    hints: 'warning' // enum
+  },
+
+  // lets you precisely control what bundle information gets displayed
+  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
+
+  devServer: {
+    contentBase: 'src/public'
+  },
+
   plugins: plugins
 };