Proposal: Let's Replace Parcel With Webpack (#2641)

* 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.

* Updates based on @coliff review

* wip

* fix merge conflict

* removing comment

* Final tweaks to docs

.eslintrc.js

@@ -2,16 +2,17 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    mocha: true
+    mocha: true,
+    node : true
   },
-  plugins: ["mocha"],
+  plugins: ['mocha'],
-  extends: "eslint:recommended",
+  extends: 'eslint:recommended',
   parserOptions: {
-    sourceType: "module"
+    sourceType: 'module'
   },
   rules: {
-    indent: ["error", 2],
+    indent: ['error', 2],
-    quotes: ["error", "single"],
+    quotes: ['error', 'single'],
-    semi: ["error", "always"]
+    semi: ['error', 'always']
   }
 };

README.md

@@ -56,7 +56,7 @@ Choose one of the following options:
   npx create-html5-boilerplate new-site
   cd new-site
   npm install
-  npm start
+  npm run start
   ```
 
 ## Features
@@ -72,7 +72,7 @@ Choose one of the following options:
   * [`Apache Server Configs`](https://github.com/h5bp/server-configs-apache)
     that improve the web site's performance and security
 * Placeholder Open Graph elements and attributes.
-* An example package.json file with [Parcel](https://parceljs.org/) commands
+* An example package.json file with [WebPack](https://webpack.js.org/) commands
   built in to jumpstart application development
 * Placeholder CSS Media Queries.
 * Useful CSS helper classes.

dist/doc/misc.md

@@ -169,13 +169,11 @@ if you're interested. The fields we provide are as follows:
   node environment. There are many [built-in keys](https://docs.npmjs.com/misc/scripts)
   related to the package lifecycle that node understands automatically. You can
   also define custom scripts for use with your application development. We
-  provide three custom scripts that work with Parcel to get you up and running
+  provide three custom scripts that work with WebPack to get you up and running
   quickly with a bundler for your assets and a simple development server.
 
-  * `start` builds your site and starts a server
+  * `start` serves your `index.html` with a simple development server
-  * `build` builds your `index.html` using Parcel
+  
-  * `dev` serves your `index.html` with a simple development server
-
 * `keywords` - an array of keywords used to discover your app in the npm
   registry
 * `author` - defines the author of a package. There is also an alternative
@@ -184,5 +182,4 @@ if you're interested. The fields we provide are as follows:
 * `license` - the license for your application. Must conform to
   [specific rules](https://docs.npmjs.com/files/package.json#license)
 * `devDependencies` - development dependencies for your package. In our case
-  it's a single dependency, Parcel, which we use to bundle files and run a
+ we have several dependencies used by WebPack, which we use as a simple development server.
-  simple web server.

dist/doc/usage.md

@@ -51,7 +51,8 @@ A basic HTML5 Boilerplate site initially looks something like this:
 ├── robots.txt
 ├── site.webmanifest
 ├── tile.png
-└── tile-wide.png
+├── tile-wide.png
+└── webpack.config.js
 ```
 
 What follows is a general overview of each major part and how to use them.
@@ -110,9 +111,6 @@ need to integrate this starting HTML with your setup.
 Make sure that you update the URLs for the referenced CSS and JavaScript if you
 modify the directory structure at all.
 
-If you are using Google Universal Analytics, make sure that you edit the
-corresponding snippet at the bottom to include your analytics ID.
-
 ### humans.txt
 
 Edit this file to include the team that worked on your site/app, and the

dist/index.html

@@ -14,9 +14,7 @@
 
   <link rel="icon" href="/favicon.ico" sizes="any">
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
-
   <link rel="apple-touch-icon" href="icon.png">
-  <!-- Place favicon.ico in the root directory -->
 
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">

dist/package.json

@@ -2,16 +2,19 @@
   "name": " ",
   "version": "0.0.1",
   "description": "",
-  "keywords": [""],
+  "keywords": [
+    ""
+  ],
   "license": "",
   "author": "",
   "scripts": {
-    "build": "parcel build index.html",
+    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "parcel index.html --open",
+    "start": "webpack-dev-server --open --port 8080"
-    "start": "npm run build && npm run dev",
-    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "parcel-bundler": "^1.12.5"
+    "webpack": "^5.64.1",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   }
 }

dist/webpack.config.js

@@ -0,0 +1,16 @@
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+module.exports = {
+  mode : 'development',
+  entry : './js/app.js',
+  devServer: {
+    liveReload: true,
+    hot: true,
+    open: true,
+    static: ['./'],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html'
+    })
+  ]
+};

src/doc/misc.md

@@ -169,13 +169,11 @@ if you're interested. The fields we provide are as follows:
   node environment. There are many [built-in keys](https://docs.npmjs.com/misc/scripts)
   related to the package lifecycle that node understands automatically. You can
   also define custom scripts for use with your application development. We
-  provide three custom scripts that work with Parcel to get you up and running
+  provide three custom scripts that work with WebPack to get you up and running
   quickly with a bundler for your assets and a simple development server.
 
-  * `start` builds your site and starts a server
+  * `start` serves your `index.html` with a simple development server
-  * `build` builds your `index.html` using Parcel
+  
-  * `dev` serves your `index.html` with a simple development server
-
 * `keywords` - an array of keywords used to discover your app in the npm
   registry
 * `author` - defines the author of a package. There is also an alternative
@@ -184,5 +182,4 @@ if you're interested. The fields we provide are as follows:
 * `license` - the license for your application. Must conform to
   [specific rules](https://docs.npmjs.com/files/package.json#license)
 * `devDependencies` - development dependencies for your package. In our case
-  it's a single dependency, Parcel, which we use to bundle files and run a
+ we have several dependencies used by WebPack, which we use as a simple development server.
-  simple web server.

src/doc/usage.md

@@ -51,7 +51,8 @@ A basic HTML5 Boilerplate site initially looks something like this:
 ├── robots.txt
 ├── site.webmanifest
 ├── tile.png
-└── tile-wide.png
+├── tile-wide.png
+└── webpack.config.js
 ```
 
 What follows is a general overview of each major part and how to use them.
@@ -110,9 +111,6 @@ need to integrate this starting HTML with your setup.
 Make sure that you update the URLs for the referenced CSS and JavaScript if you
 modify the directory structure at all.
 
-If you are using Google Universal Analytics, make sure that you edit the
-corresponding snippet at the bottom to include your analytics ID.
-
 ### humans.txt
 
 Edit this file to include the team that worked on your site/app, and the

src/index.html

@@ -14,9 +14,7 @@
 
   <link rel="icon" href="/favicon.ico" sizes="any">
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
-
   <link rel="apple-touch-icon" href="icon.png">
-  <!-- Place favicon.ico in the root directory -->
 
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">

src/package.json

@@ -2,16 +2,19 @@
   "name": " ",
   "version": "0.0.1",
   "description": "",
-  "keywords": [""],
+  "keywords": [
+    ""
+  ],
   "license": "",
   "author": "",
   "scripts": {
-    "build": "parcel build index.html",
+    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "parcel index.html --open",
+    "start": "webpack-dev-server --open --port 8080"
-    "start": "npm run build && npm run dev",
-    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "parcel-bundler": "^1.12.5"
+    "webpack": "^5.64.1",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   }
 }

src/webpack.config.js

@@ -0,0 +1,16 @@
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+module.exports = {
+  mode : 'development',
+  entry : './js/app.js',
+  devServer: {
+    liveReload: true,
+    hot: true,
+    open: true,
+    static: ['./'],
+  },
+  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