Proposal: Let's Replace Parcel With Webpack

Closes #2487 and #2474

This is just a development server at this point. It hot reloads HTML JS and CSS.  That's enough for me. I'm open to contrary opinions.

Author: roblarsen

dist/package.json

@@ -6,12 +6,15 @@
   "license": "",
   "author": "",
   "scripts": {
-    "build": "parcel build index.html",
-    "dev": "parcel index.html --open",
-    "start": "npm run build && npm run dev",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --open --port 8080"
+  },
+  "dependencies": {
+    "webpack": "^4.36.1"
   },
   "devDependencies": {
-    "parcel-bundler": "^1.12.5"
+    "html-webpack-plugin": "^3.2.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
   }
 }

dist/webpack.config.js

@@ -0,0 +1,15 @@
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+module.exports = {
+    entry : "./js/main.js",
+    devServer: {
+        liveReload: true,
+        watchContentBase: true,
+        inline: true,
+        hot: true,
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        })
+    ]
+ };

src/package.json

@@ -6,12 +6,15 @@
   "license": "",
   "author": "",
   "scripts": {
-    "build": "parcel build index.html",
-    "dev": "parcel index.html --open",
-    "start": "npm run build && npm run dev",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --open --port 8080"
+  },
+  "dependencies": {
+    "webpack": "^4.36.1"
   },
   "devDependencies": {
-    "parcel-bundler": "^1.12.5"
+    "html-webpack-plugin": "^3.2.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
   }
 }

src/webpack.config.js

@@ -0,0 +1,15 @@
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+module.exports = {
+    entry : "./js/main.js",
+    devServer: {
+        liveReload: true,
+        watchContentBase: true,
+        inline: true,
+        hot: true,
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        })
+    ]
+ };

test/file_existence.js

@@ -20,6 +20,7 @@ const expectedFilesInDistDir = [
   '404.html',
   'package.json',
   'browserconfig.xml',
+  'webpack.config.js',
 
   'css/', // for directories, a `/` character
   // should be included at the end