build using webpack

[tophf]

• fixes Add build system #1366
• fixes Move extension content to a subfolder? #514

Seems to work, but I didn't test everything, so I plan to publish it only into beta for a while. Editor/manager now open slightly faster, as expected, due to bundling and minifying dozens of scripts.

Todo:

• MV3 build
• MV2 builds + zips for web stores
• tests
• (eventually) actions to upload build artifacts
• (eventually) actions to publish in the web stores

@eight04, now the source code is using modern conventions (more or less), so it's easier to work with, especially in nontrivial ways. I'll be primarily working on MV3 (arguably using conditional compilation, I don't know yet), so maybe you could take a look at this PR as a whole and advise or participate. Since I don't have a lot of experience in tooling, there's probably a lot to improve. BTW I've tried rollup and although it produced nice ES modules, I still switched to webpack because it's much more flexible at about the same speed. Regarding all those WIP commits, I won't merge them, I'll rebase/regroup everything or just squash it in one commit later.

[tophf]

Here's the diff after moving to src which makes more sense for online browsing: https://github.com/openstyles/stylus/pull/1828/files/b4aa1c4d4a2b13ff778dcf16f7b1e57591787394..HEAD

[eight04]

I have never used webpack either so I can only tell from my rollup experience:

1. It seems that library/content scripts are built separatedly. IDK how webpack handles multiple configs. Does it generate duplicated code when both of them import the same module?
2. comlink may make it easier to work with workers.
3. I noticed that there is a src/package.json. Is that how babel config works?
4. Put static files in a static folder to simplify the config for CopyPlugin.
5. Some pre-built IIFE libraries are also copied. I think it is possible to import them with a custom loader simply prepending export to the source.
6. Now we can switch to a component system supporting templates. It will be way more readable than createElement and addEventListener.
7. My browser freezes when navigating to https://github.com/openstyles/stylus/pull/1828/files so I can only view the code from my editor.

---

Here are some examples using rollup:

• A single config to bundle multiple entries, using comlink. After rollup generates chunks for multiple entries, it writes their paths to manifest.json, options.html, etc. https://github.com/eight04/ansi-viewer/blob/master/rollup.config.js
• Two configs with different entry points. One for extension and one for userscript. https://github.com/eight04/linkify-plus-plus/blob/master/rollup.config.mjs

[tophf]

Great stuff, thanks.

duplicated code

I had to split the worker scripts manually into separate compilation items in webpack (previously did the same in rollup) to reuse the code, but comlink should greatly simplify it, thanks.

The content script is intentionally a single bundle because only ~600 bytes for msg-base are duplicated, which isn't worth extracting.

src/package.json

Dunno yet, I forgot to finish my investigation about it. I'll probably remove it, if the extra re plugin doesn't break node_modules and doesn't slow down compilation.

[tophf]

stylus-mv3-test-42278e61.zip

[tophf]

stylus-mv3-test-cc965cef.zip

[tophf]

stylus-mv3-test-7c205b95.zip

[tophf]

stylus-mv3-test-b32a8a99.zip

[tophf]

stylus-chrome-beta-3.0.1.zip