Update to webpack 5

This commit is contained in:
Johannes Marbach 2023-09-23 21:34:56 +02:00
parent 3d65ff06e9
commit af3659a90e
6 changed files with 368 additions and 1298 deletions

View file

@ -48,7 +48,7 @@
"start": "yarn build:module_system && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"", "start": "yarn build:module_system && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
"start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"", "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"",
"start:res": "yarn build:jitsi && ts-node scripts/copy-res.ts -w", "start:res": "yarn build:jitsi && ts-node scripts/copy-res.ts -w",
"start:js": "webpack serve --output-path webapp --mode development", "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
"lint": "yarn lint:types && yarn lint:js && yarn lint:style", "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
"lint:js": "yarn lint:js:src && yarn lint:js:module_system", "lint:js": "yarn lint:js:src && yarn lint:js:module_system",
"lint:js:src": "eslint --max-warnings 0 src test && prettier --check .", "lint:js:src": "eslint --max-warnings 0 src test && prettier --check .",
@ -103,7 +103,7 @@
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@casualbot/jest-sonar-reporter": "^2.2.5", "@casualbot/jest-sonar-reporter": "^2.2.5",
"@principalstudio/html-webpack-inject-preload": "^1.2.7", "@principalstudio/html-webpack-inject-preload": "^1.2.7",
"@sentry/webpack-plugin": "^2.0.0", "@sentry/webpack-plugin": "^2.7.1",
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"@testing-library/react": "^12.1.5", "@testing-library/react": "^12.1.5",
"@types/jest": "^29.0.0", "@types/jest": "^29.0.0",
@ -122,6 +122,7 @@
"allchange": "^1.0.6", "allchange": "^1.0.6",
"babel-jest": "^29.0.0", "babel-jest": "^29.0.0",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"buffer": "^6.0.3",
"chokidar": "^3.5.1", "chokidar": "^3.5.1",
"concurrently": "^8.0.0", "concurrently": "^8.0.0",
"cpx": "1.5.0", "cpx": "1.5.0",
@ -141,7 +142,7 @@
"fetch-mock-jest": "^1.5.1", "fetch-mock-jest": "^1.5.1",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"fs-extra": "^11.0.0", "fs-extra": "^11.0.0",
"html-webpack-plugin": "^4.5.2", "html-webpack-plugin": "^5.5.3",
"jest": "^29.0.0", "jest": "^29.0.0",
"jest-canvas-mock": "2.5.2", "jest-canvas-mock": "2.5.2",
"jest-environment-jsdom": "^29.0.0", "jest-environment-jsdom": "^29.0.0",
@ -151,12 +152,12 @@
"loader-utils": "^3.0.0", "loader-utils": "^3.0.0",
"matrix-mock-request": "^2.5.0", "matrix-mock-request": "^2.5.0",
"matrix-web-i18n": "^3.1.1", "matrix-web-i18n": "^3.1.1",
"mini-css-extract-plugin": "^1", "mini-css-extract-plugin": "^2.7.6",
"minimist": "^1.2.6", "minimist": "^1.2.6",
"mkdirp": "^3.0.0", "mkdirp": "^3.0.0",
"modernizr": "^3.12.0", "modernizr": "^3.12.0",
"node-fetch": "^2.6.7", "node-fetch": "^2.6.7",
"optimize-css-assets-webpack-plugin": "^6.0.0", "optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"postcss-easings": "^2.0.0", "postcss-easings": "^2.0.0",
"postcss-hexrgba": "2.0.1", "postcss-hexrgba": "2.0.1",
@ -168,20 +169,23 @@
"postcss-scss": "^4.0.4", "postcss-scss": "^4.0.4",
"postcss-simple-vars": "^5.0.2", "postcss-simple-vars": "^5.0.2",
"prettier": "2.8.8", "prettier": "2.8.8",
"process": "^0.11.10",
"proxy-agent": "^6.3.0", "proxy-agent": "^6.3.0",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"rimraf": "^5.0.0", "rimraf": "^5.0.0",
"semver": "^7.5.2", "semver": "^7.5.2",
"setimmediate": "^1.0.5",
"string-replace-loader": "3", "string-replace-loader": "3",
"style-loader": "2", "style-loader": "2",
"stylelint": "^15.10.1", "stylelint": "^15.10.1",
"stylelint-config-standard": "^34.0.0", "stylelint-config-standard": "^34.0.0",
"stylelint-scss": "^5.0.0", "stylelint-scss": "^5.0.0",
"terser-webpack-plugin": "^4.0.0", "terser-webpack-plugin": "^5.3.9",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"ts-prune": "^0.10.3", "ts-prune": "^0.10.3",
"typescript": "5.1.6", "typescript": "5.1.6",
"webpack": "^4.47.0", "util": "^0.12.5",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.8.0", "webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.15.1", "webpack-dev-server": "^4.15.1",

View file

@ -16,8 +16,7 @@ limitations under the License.
import * as React from "react"; import * as React from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig"; import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import AuthFooter from "matrix-react-sdk/src/components/views/auth/AuthFooter";
import VectorAuthFooter from "./VectorAuthFooter";
export default class VectorAuthPage extends React.PureComponent { export default class VectorAuthPage extends React.PureComponent {
private static welcomeBackgroundUrl?: string; private static welcomeBackgroundUrl?: string;
@ -77,7 +76,7 @@ export default class VectorAuthPage extends React.PureComponent {
{this.props.children} {this.props.children}
</div> </div>
</div> </div>
<VectorAuthFooter /> <AuthFooter />
</div> </div>
); );
} }

View file

@ -49,10 +49,9 @@
<% } <% }
} %> } %>
<% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) { <% for (const tag of htmlWebpackPlugin.tags.headTags) {
var tag = htmlWebpackPlugin.tags.headTags[i]; let path = tag.attributes && tag.attributes.href;
var path = tag.attributes && tag.attributes.href; if (path && path.includes("/Inter/")) { %>
if (path.includes("/Inter/")) { %>
<link rel="preload" as="font" href=".<%= path %>" crossorigin="anonymous"/> <link rel="preload" as="font" href=".<%= path %>" crossorigin="anonymous"/>
<% } <% }
} %> } %>

View file

@ -25,6 +25,9 @@ import { extractErrorMessageFromError } from "matrix-react-sdk/src/components/vi
import { parseQsFromFragment } from "./url_utils"; import { parseQsFromFragment } from "./url_utils";
import "./modernizr"; import "./modernizr";
// Make setImmediate available in bundle
import "setimmediate";
// Require common CSS here; this will make webpack process it into bundle.css. // Require common CSS here; this will make webpack process it into bundle.css.
// Our own CSS (which is themed) is imported via separate webpack entry points // Our own CSS (which is themed) is imported via separate webpack entry points
// in webpack.config.js // in webpack.config.js

View file

@ -146,14 +146,6 @@ module.exports = (env, argv) => {
bail: true, bail: true,
node: {
// Mock out the NodeFS module: The opus decoder imports this wrongly.
fs: "empty",
net: "empty",
tls: "empty",
crypto: "empty",
},
entry: { entry: {
bundle: "./src/vector/index.ts", bundle: "./src/vector/index.ts",
mobileguide: "./src/vector/mobile_guide/index.ts", mobileguide: "./src/vector/mobile_guide/index.ts",
@ -193,7 +185,7 @@ module.exports = (env, argv) => {
// This fixes duplicate files showing up in chrome with sourcemaps enabled. // This fixes duplicate files showing up in chrome with sourcemaps enabled.
// See https://github.com/webpack/webpack/issues/7128 for more info. // See https://github.com/webpack/webpack/issues/7128 for more info.
namedModules: false, moduleIds: "named",
// Minification is normally enabled by default for webpack in production mode, but // Minification is normally enabled by default for webpack in production mode, but
// we use a CSS optimizer too and need to manage it ourselves. // we use a CSS optimizer too and need to manage it ourselves.
@ -241,6 +233,16 @@ module.exports = (env, argv) => {
// Define a variable so the i18n stuff can load // Define a variable so the i18n stuff can load
"$webapp": path.resolve(__dirname, "webapp"), "$webapp": path.resolve(__dirname, "webapp"),
}, },
fallback: {
// Mock out the NodeFS module: The opus decoder imports this wrongly.
fs: false,
net: false,
tls: false,
crypto: false,
// Polyfill needed by counterpart
util: require.resolve("util/"),
}
}, },
module: { module: {
@ -708,7 +710,15 @@ module.exports = (env, argv) => {
console.log(`::warning title=Sentry error::${err.message}`); console.log(`::warning title=Sentry error::${err.message}`);
}, },
}), }),
new webpack.EnvironmentPlugin(["VERSION"]), new webpack.EnvironmentPlugin(["VERSION"]),
// Automatically load buffer & process modules. Webpack 5 doesn't polyfill them
// automatically anymore.
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
}),
].filter(Boolean), ].filter(Boolean),
output: { output: {

1605
yarn.lock

File diff suppressed because it is too large Load diff