Minimal Webpack 4 -> 5 implementation [portable] #454
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed Changes
This PR follows up #429. Following that PR's code, it does three things:
webpack@latest
(5.90.3, from 4.47.0, both pinned)webpack-cli@latest
(5.1.4, from 3.3.12, both pinned)terser-webpack-plugin@latest
(5.3.10, from 1.4.5, both pinned)file-loader@latest
(6.2.0, from 4.3.0, both pinned; same as scratch-vm)worker-loader@latest
(3.0.8, from 2.0.0, both un-pinned; retains webpack 4 compat)--colors
from webpack scripts, it's no longer neededworker-loader
{"inline":true,"fallback":true}
is now{"inline":"fallback"}
sourceMap: true
option from call to TerserPlugincheap-module-source-map
, which Terser doesn't support. See Special cases in webpack docs. "The following options are not ideal for development nor production. They are needed for some special cases, i. e. for some 3rd party tools." However, we decided messing with the source map setting was out of scope for this PR, and only updated the call to TerserPlugin. If a compatible source map setting is used then source maps will automatically be enabled.commonjs2
toumd
module.exports
with a value of your choosing, e.g.module.exports = "foo bar"
; if you do, it will just export asmodule.exports.ScratchStorage = "foo bar"
. This is a problem because lots of code depends on importingimport ScratchStorage from 'scratch-storage'
and would have to be updated toimport {ScratchStorage} from 'scratch-storage'
, which is not ideal. umd2 avoids this problem and the export continues to work as intended.target: 'web'
library which was already of type umd2, and so avoids this problem already.Reason for Changes
/cc @cwillisf
Minimizing the changes required to port Scratch to Webpack 5, in general, as Webpack 4 is outdated and severely prevents Scratch from being built with anything beyond Node.js 16, which has exited maintenance LTS support as of October 2023, so is eventually or immediately a security issue for Scratch developers (both open-source and in Scratch's own development). See our summary in other pull requests e.g. scratchfoundation/scratch-vm#4171, merged three hours ago as of writing.
This PR takes a "fewest changes necessary" approach. Please note that Webpack 5 includes proper, built-in support for web workers and this PR does not take advantage of it, instead retaining the (deprecated)
worker-loader
dependency. We do this because the updated version of worker-loader (3.0.8) retains compatibility with Webpack 4. This means scratch-storage supports both webpack 4 and 5, so I describe this PR as "portable".This PR is technically one degree less minimal than it strictly has to be: It updates the tooling for scratch-storage so that its own development happens with Webpack 5. This is mostly as a proof of concept, i.e. demonstrating the minimal amount of work required to port from 4 to 5, generally speaking. (Obviously, scratch-storage is a much less complex package than scratch-vm or scratch-gui. But still! 👻) But it's also toward the general goal of porting development from 4 to 5 and after this PR scratch-storage no longer needs to be touched, except for niceties and non-portable changes such as using the built-in web worker support rather than a deprecated (albeit back-compatible) module.
scratch-storage is a valuable repository to start with, for a few reasons:
Edit: Oh hey, scratch-www already moved to Webpack 5 while I wasn't looking ^_^ 🥳
All the same this helps get closer to a scratch-vm and scratch-gui that's built and developed in Webpack 5!
Test Coverage
Tested in various ways:
Note: When testing locally, I do get certain warnings about downloading source maps for what appears to be a web worker, which I thought might be related (see the notes on source maps above):
However, these appear when I test with the unmodified/npm published scratch-storage too, so they don't appear to be introduced by this pull request.