attempt to include manually changes from PR coryhouse#7

Author: Knut Behrends

.babelrc

@@ -1,5 +1,17 @@
 {
-  "presets": [
-    "latest"
-  ]
+  "presets": ["env"],
+  "env": {
+    "production": {
+      "presets": [
+        [
+          "env",
+          {
+            "es2015": {
+              "modules": false
+            }
+          }
+        ]
+      ]
+    }
+  }
 }

package.json

@@ -1,15 +1,14 @@
 {
   "name": "javascript-development-environment",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "JavaScript development environment",
   "scripts": {
     "prestart": "babel-node buildScripts/startMessage.js",
-    "start": "npm-run-all --parallel security-check open:src lint:watch test:watch",
-    "start-mocked": "npm-run-all --parallel security-check open:src lint:watch test:watch start-mockapi",
+    "start": "npm-run-all  open:src lint:watch test:watch",
+    "start-mocked": "npm-run-all open:src lint:watch test:watch start-mockapi",
     "open:src": "babel-node buildScripts/srcServer.js",
     "lint": "esw webpack.config.* src buildScripts --color",
     "lint:watch": "npm run lint -- --watch",
-    "security-check": "nsp check",
     "localtunnel": "lt --port 3000",
     "share": "npm-run-all --parallel open:src localtunnel",
     "test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"",
@@ -49,15 +48,14 @@
     "eslint-watch": "^3.1.5",
     "express": "^4.16.3",
     "extract-text-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "2.22.0",
+    "html-webpack-plugin": "3.2.0",
     "jsdom": "^11.11.0",
     "json-schema-faker": "^0.5.0-rc15",
     "json-server": "^0.14.0",
     "localtunnel": "^1.9.0",
     "mocha": "^5.2.0",
     "nock": "^9.6.1",
     "npm-run-all": "^4.1.3",
-    "nsp": "^3.2.1",
     "numeral": "^2.0.6",
     "open": "0.0.5",
     "rimraf": "^2.6.2",

webpack.config.dev.js

@@ -1,10 +1,14 @@
+import webpack from 'webpack';
 import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 export default {
-  debug: true,
+  mode: 'development',
+  resolve: {
+    extensions: ['*', '.js', '.jsx', '.json']
+  },
   devtool: 'inline-source-map',
-  noInfo: false,
+
   entry: [path.resolve(__dirname, 'src/index')],
   target: 'web',
   output: {
@@ -13,16 +17,22 @@ export default {
     filename: 'bundle.js'
   },
   plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: false,
+      debug: true,
+      noInfo: true // set to false to see a list of every file being bundled.
+    }),
+
     // Create HTML file that includes reference to bundled JS.
     new HtmlWebpackPlugin({
       template: 'src/index.html',
       inject: true
     })
   ],
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
-      { test: /\.css$/, loaders: ['style', 'css'] }
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
+      { test: /\.css$/, loaders: ['style-loader', 'css-loader'] }
     ]
   }
 };

webpack.config.prod.js

@@ -3,11 +3,15 @@ import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WebpackMd5Hash from 'webpack-md5-hash';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+//debug: true,
+//noInfo: false,
 
 export default {
-  debug: true,
+  mode: 'production',
+  resolve: {
+    extensions: ['*', '.js', '.jsx', '.json']
+  },
   devtool: 'source-map',
-  noInfo: false,
   entry: {
     vendor: path.resolve(__dirname, 'src/vendor'),
     main: path.resolve(__dirname, 'src/index')
@@ -18,19 +22,39 @@ export default {
     publicPath: '/',
     filename: '[name].[chunkhash].js'
   },
+  // Webpack 4 removed the commonsChunkPlugin. Use optimization.splitChunks instead.
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all'
+        }
+      }
+    }
+  },
   plugins: [
+    // Global loader configuration
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false,
+      noInfo: true // set to false to see a list of every file being bundled.
+    }),
+
     // (separate css and js)
     // Generate an external css file with a hash in the filename
-    new ExtractTextPlugin('[name].[contenthash].css'),
-
+    //new ExtractTextPlugin('[name].[contenthash].css'),
+    new ExtractTextPlugin('[name].[md5:contenthash:hex:20].css'),
     // Hash the files using MD5 so that their names change when the content changes.
     new WebpackMd5Hash(),
 
     // Use CommonsChunkPlugin to create a separate bundle
     // of vendor libraries so that they're cached separately.
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor'
-    }),
+    // No longer used for Webpack 4. See optimization.splitChunks above instead.
+    // new webpack.optimize.CommonsChunkPlugin({
+    //   name: 'vendor'
+    // }),
 
     // Create HTML file that includes reference to bundled JS.
     new HtmlWebpackPlugin({
@@ -51,18 +75,22 @@ export default {
       // Properties you define here are available in index.html
       // using htmlWebpackPlugin.options.varName
       trackJSToken: 'INSERT YOUR TOKEN HERE'
-    }),
+    })
 
     // Eliminate duplicate packages when generating bundle
-    new webpack.optimize.DedupePlugin(),
+    //new webpack.optimize.DedupePlugin()
 
+    // Code is automatically minified in prod mode as of Webpack 4, so removing this.
     // Minify JS
-    new webpack.optimize.UglifyJsPlugin()
+    //new webpack.optimize.UglifyJsPlugin()
   ],
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
-      { test: /\.css$/, loader: ExtractTextPlugin.extract('css?sourceMap') } // extra param is a hint to webpack
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('css-loader?sourceMap')
+      } // extra param is a hint to webpack
     ]
   }
 };