Add prod and dev configs, dev-server

- Broke our webpack.config file into 3 files
- webpack.common.js, webpack.dev.js, and webpack.prod.js
- installed webpack-merge to share the common functionality
- updated our package.json to use the new config files
- installed webpack-dev-server and added it to start script in package.json

package.json

@@ -5,7 +5,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack  --config webpack.config.js"
+    "start": "webpack-dev-server  --config webpack.dev.js --open",
+    "build": "webpack --config webpack.prod.js"
   },
   "keywords": [],
   "author": "",
@@ -18,6 +19,8 @@
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3"
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
+    "webpack-merge": "^4.2.1"
   }
 }

webpack.common.js

@@ -2,12 +2,7 @@ const path = require("path");
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-  mode: "development",
   entry: "./src/index.js",
-  output: {
-    filename: "main.[contentHash].js",
-    path: path.resolve(__dirname, "dist")
-  },
   plugins: [
     new HtmlWebpackPlugin({
       template: "./src/template.html"

webpack.dev.js

@@ -0,0 +1,11 @@
+const path = require("path");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+
+module.exports = merge(common, {
+  mode: "development",
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "dist")
+  }
+});

webpack.prod.js

@@ -0,0 +1,11 @@
+const path = require("path");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+
+module.exports = merge(common, {
+  mode: "production",
+  output: {
+    filename: "main.[contentHash].js",
+    path: path.resolve(__dirname, "dist")
+  }
+});