Fix webpack warnings and reenable webpack test (#3094)

This uses sed to insert /* webpackIgnore: true */ comments into pyodide.js. 
This resolves #3087. I also enabled a check that a simple webpack config
builds without warnings. In the future it would be good to add a test that it
also runs without error.

.circleci/config.yml

@@ -369,14 +369,14 @@ jobs:
             npm link ../../dist
             npm run test-types
             npm test
-      # - run:
-      #     name: check if webpack cli works well with load-pyodide.js
-      #     command: |
-      #       git clone https://github.com/pyodide/pyodide-webpack-example.git
-      #       cd pyodide-webpack-example
-      #       npm ci
-      #       cp ../src/js/*.js node_modules/pyodide/
-      #       npx webpack
+      - run:
+          name: check if Pyodide works with Webpack
+          command: |
+            git clone https://github.com/pyodide/pyodide-webpack-example.git
+            export DEV_PYODIDE_PATH=`realpath dist`
+            cd pyodide-webpack-example
+            git checkout 164054a9c6fbd2176f386b6552ed8d079c6bcc04
+            ./build.sh
 
   test-cmdline-runner:
     <<: *defaults

Makefile

@@ -74,6 +74,10 @@ node_modules/.installed : src/js/package.json src/js/package-lock.json
 
 dist/pyodide.js src/js/_pyodide.out.js: src/js/*.ts src/js/pyproxy.gen.ts src/js/error_handling.gen.ts node_modules/.installed
 	npx rollup -c src/js/rollup.config.js
+   # Add /* webpackIgnore: true */ to each dynamic import in `pyodide.js`.
+   # Rollup strips comments so this can't be done via the source file.
+   # We use ! as the sed separator because the replacement text includes /
+	sed -i 's!await import(!await import(/* webpackIgnore: true */ !g' dist/pyodide.js
 
 dist/package.json : src/js/package.json
 	cp $< $@

docs/project/changelog.md

@@ -58,6 +58,11 @@ substitutions:
 - {{ Fix }} Add `url` to list of pollyfilled packages for webpack compatibility.
   {pr}`3080`
 
+- {{ Fix }} Fixed warnings like
+  `Critical dependency: the request of a dependency is an expression.`
+  when using Pyodide with webpack.
+  {pr}`3080`
+
 - {{ Fix }} Source maps are included in the distribution again (reverting
   {pr}`3015` included in 0.21.2) and if there is a variable in top level scope
   called `__dirname` we use that for the `indexURL`.

src/js/compat.ts

@@ -182,7 +182,6 @@ if (globalThis.document) {
 } else if (globalThis.importScripts) {
   // webworker
   loadScript = async (url) => {
-    // This is async only for consistency
     try {
       // use importScripts in classic web worker
       globalThis.importScripts(url);