Webpack 5 upgrade #7351
Webpack 5 upgrade #7351
Conversation
- Rewrite webpack aliased paths like ~terriajs-variables and ~terriajs-mixins to
plain relative paths so that we can run the auto migrator.
This was done using the following shell command:
```
find lib/ -name '*.scss' -exec bash -c 'sed -i "s|~terriajs-variables|$(realpath -s --relative-to=$(dirname "$1") lib/Sass/common/_variables)|" $1' bash {} \;
```
- Run auto migrator
```
find lib/ -name '*.scss' -exec npx sass-migrator module {} \;
```
Instead of using 'raw-loader!' etc in the import path, we now handle these import in webpack config. See webpack.config.make.js.
Removes use of 'raw-loader!' etc in import paths. Instead handle the imports in webpack config.
Webpack literally works only for 'process.env.NODE_ENV'.
|
I looked through this and besides the things I commented on, the things that are there looks good to me. Would love to get the (approved) CJS to ESM PR merged soon so this PR doesn't end up in limbo. |
There was a problem hiding this comment.
I have cherry-picked changes from #7450, it should be easier to review now as code-diff overthere got pretty large and we can now handle this in single review cycle
- Fixed review comments
- Removed unused weback plugins
- upgraded webpack plugins
- I didn't see any reason why we would need
pmtilesalias in webpack config - marked it with review comment for double check. - I had to restore worker-loader as webpack native web worker support tends to get pretty complex, I will keep looking for a fix but it might be good to keep worker-loader and handle that as a follow-up. Important note: webpack worker support behaves differently in development and production builds. That's why it works on CI but fails locally. I have run into this issue in the past but still don't have a solution that always works.
- side-effects are removed from package.json we can look into it later
Adds a custom property `Ion.defaultTokenMessage` for changing the credit message shown on the map when using default Ion token.
|
Regarding the web worker change, it appears to work if we set publicPath to I think webpack will use We could test it out in a different PR. |
This was mostly required back when using polyfill.io to perform polyfills.
If this works in the current state I suggest merging it, this PR is already a significant step forward. I'll rebase the ESLint fixes after this gets merged so the TypeScript upgrade can get merged too. |
|
Merging! Thanks everyone, for the contributions. PS: will merge the terriamap PR after a new terriajs release, but i'll see if I can include the Typescript upgrade PR into this release. |
|
@na9da since you wrote "Merging!" I was going to rebase the ESLint fixes for TS 5.7 before I go to bed so those could be merged, but I'm guessing you got interrupted by something else. Will this PR get merged soon, or should I go to bed now and rebase things tomorrow? |
What this PR does
Fixes #6998
Depends on TerriaJS/TerriaMap#718 and #7311
Upgrades webpack and other build dependencies to the latest version.
Note: bulk of the changes are from running the saas-migrator that upgrades
.scssfiles to modern api.Changes summary
webpack, ...
plugin-proposal-class-properties,proposal-object-rest-spread,plugin-syntax-dynamic-import. These must now be well supported by browsers.raw-loaderfile-loaderurl-loaderetc with builtin asset modulesraw-loader!file-loaderetc to make it more ESM compliant. Added extra config in webpack to correctly handle imports of static files (like csv and xml).hotreload config. AFAICT this was not being used and required maintaining two different code paths in webpack configuration. If required we can add it back later after testing that it works.configureWebpackparameters with a single options parameter.string-replace-webpack-pluginas it was outdated and has a few vulnerabilities.sass-migratorscript)~terriajs-variablesand~terriajs-mixinswith respective relative path. This was necessary to run the migrator. Also it means simpler webpack config.css-modules-typescript-loaderthat generates TS types for SASS modules is outdated and no longer works with webpack 5. I have made a repo from a fork of another similar package that can generate types. The other alternative would be to use this TS plugin - but not sure if it'll slow down compilation/editing.svg-sprite-loader. It appears to be not maintained and has a bunch of audit warnings.I'll annotate the changes to make review easier.
Test me
Checklist
doc/.