Refactor extension to webpack

This change is the biggest in the history of the project. The entire
project has been refactored so it is built with webpack.

This involves:
- Creating webpack and npm config files.
- Fixing some bugs in the code due to the fact that webpack uses strict
- Merging some pieces of code which were shared throughout the codebase
(not exhaustive, more work should be done in this direction).
- Splitting the console_inject.js file into separate files (it had 1000+
- Adapting all the build-related files (Makefile, bash scripts, etc.)
- Changing the docs to explain the new build process.
- Changing the Zuul playbook/roles to adapt to the new build process.

Change-Id: I16476d47825461c3a318b3f1a1eddb06b2df2e89
diff --git a/Makefile b/Makefile
index c630cf7..0123e00 100644
--- a/Makefile
+++ b/Makefile
@@ -1,18 +1,52 @@
-.PHONY: all chromium-stable chromium-beta chromium-mv3-beta gecko-stable clean
+.PHONY: node_deps clean_dist deps clean_deps serve_chromium serve_chromium_mv3 serve_gecko release release_chromium_stable release_chromium_beta release_gecko_stable build_test_extension clean_releases clean
-all: chromium-stable chromium-beta chromium-mv3-beta gecko-stable
+WEBPACK := ./node_modules/webpack-cli/bin/cli.js
+RELEASE_SCRIPT := bash tools/release.bash
-	bash release.bash -c stable -b chromium
+	npm ci --no-save
-	bash release.bash -c beta -b chromium
+	rm -rf dist
-	bash release.bash -c beta -b chromium_mv3
+deps: node_deps
+	mkdir -p dist
-	bash release.bash -c stable -b gecko
+	rm -rf node_modules
+serve_chromium: deps
+	$(WEBPACK) --mode development --env browser_target=chromium --watch
+serve_chromium_mv3: deps
+	$(WEBPACK) --mode development --env browser_target=chromium_mv3 --watch
+serve_gecko: deps
+	$(WEBPACK) --mode development --env browser_target=gecko --watch
+release: release_chromium_stable release_chromium_beta release_gecko_stable
+release_chromium_stable: deps
+	$(WEBPACK) --mode production --env browser_target=chromium
+	$(RELEASE_SCRIPT) -c stable -b chromium
+	rm -rf dist/chromium
+release_chromium_beta: deps
+	$(WEBPACK) --mode production --env browser_target=chromium
+	$(RELEASE_SCRIPT) -c beta -b chromium
+	rm -rf dist/chromium
+release_gecko_stable: deps
+	$(WEBPACK) --mode production --env browser_target=gecko
+	$(RELEASE_SCRIPT) -c stable -b gecko
+	rm -rf dist/gecko
+# Target to build the extension for webext lint in the Zuul Check Pipeline.
+build_test_extension: deps
+	$(WEBPACK) --mode production --env browser_target=gecko
+	$(RELEASE_SCRIPT) -c stable -b gecko
 	rm -rf out
+clean: clean_deps clean_dist clean_releases