Proposal: Let's Replace Parcel With Webpack

[roblarsen]

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 guess we'll need a build step.

I also need to change the docs, if we go this way.

[coliff]

Nice! I like idea of using Webpack instead of Parcel. Some quick feedback/things I noticed:

• the src/package.json isn't using latest versions - we should update them:

 html-webpack-plugin   ^3.2.0  →   ^5.5.0     
 webpack-cli           ^3.3.6  →   ^4.9.1     
 webpack-dev-server    ^3.7.2  →   ^4.5.0     
 webpack              ^4.36.1  →  ^5.64.1

• the entry: in the webpack config should be app.js not main.js

• the webpack.config.js indenting should be 2 not 4 to match .editorconfig rule and use single quotes not double quotes to match eslint config

[roblarsen]

@coliff can you take a look at this? I want to chunk out the tasks a little bit and I'm interested in merging this part first, then look at builds for the dist folder and for the project itself.

[coliff]

heya. so if a user clones this repo and does npm install, then changes directory to src and runs npm run start the server won't serve the CSS because those were copied to the dist dir instead. should a user run local server from dist instead - assume so?

Unrelated note, we should remove that Place favicon.ico in the root directory comment from the HTML as it is no longer needed (the meta tag is included)

[coliff]

There's a couple of eslint 'errors' on webpack.config.js (when it's checked automatically with ESlint plugin in VS Code) but I assume they are fine.

Should be eslint ignore webpack.config.js - or add rule to turn off no-undef errors?

[roblarsen]

@coliff Yeah, this end user webpack stuff needs to be run from dist. I'm going to write up a bunch of documentation about how the dist folder is the project for end users to make that point clear (the addition of the template repo will help reinforce that. That's one of the things that came out of that Chris Coyier article.

I'll remove the comment here.

[roblarsen]

There's a couple of eslint 'errors' on webpack.config.js (when it's checked automatically with ESlint plugin in VS Code) but I assume they are fine. Should be eslint ignore webpack.config.js - or add rule to turn off no-undef errors?

The errors aren't really errors, but we can turn off no-undef to make the red squiggles go away.

[coliff]

Great. I'll open a PR for eslint config update, we also need to update the " to ' to match the quotes: single rule in eslint itself!

[roblarsen]

@coliff I got the eslint stuff. I added node as an environment and changed the quotes.

[roblarsen]

I need to update the docs since right now all this does is run the development server. We reference three npm scripts- there's just one now. I will create a build task later, but I don't want to have this PR open forever.

[vltansky]

Why not Vite?

[roblarsen]

Why not Vite?

Webpack is something I use, so conceptually it was the easiest thing for me to get up and running. It also allows us to do the things that I require for this tool. It's also a giant, stable project at the heart of the web, so it seems safest.