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: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: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:js": "yarn lint:js:src && yarn lint:js:module_system",
"lint:js:src": "eslint --max-warnings 0 src test && prettier --check .",
@ -103,7 +103,7 @@
"@babel/runtime": "^7.12.5",
"@casualbot/jest-sonar-reporter": "^2.2.5",
"@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",
"@testing-library/react": "^12.1.5",
"@types/jest": "^29.0.0",
@ -122,6 +122,7 @@
"allchange": "^1.0.6",
"babel-jest": "^29.0.0",
"babel-loader": "^8.2.2",
"buffer": "^6.0.3",
"chokidar": "^3.5.1",
"concurrently": "^8.0.0",
"cpx": "1.5.0",
@ -141,7 +142,7 @@
"fetch-mock-jest": "^1.5.1",
"file-loader": "^6.0.0",
"fs-extra": "^11.0.0",
"html-webpack-plugin": "^4.5.2",
"html-webpack-plugin": "^5.5.3",
"jest": "^29.0.0",
"jest-canvas-mock": "2.5.2",
"jest-environment-jsdom": "^29.0.0",
@ -151,12 +152,12 @@
"loader-utils": "^3.0.0",
"matrix-mock-request": "^2.5.0",
"matrix-web-i18n": "^3.1.1",
"mini-css-extract-plugin": "^1",
"mini-css-extract-plugin": "^2.7.6",
"minimist": "^1.2.6",
"mkdirp": "^3.0.0",
"modernizr": "^3.12.0",
"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-easings": "^2.0.0",
"postcss-hexrgba": "2.0.1",
@ -168,20 +169,23 @@
"postcss-scss": "^4.0.4",
"postcss-simple-vars": "^5.0.2",
"prettier": "2.8.8",
"process": "^0.11.10",
"proxy-agent": "^6.3.0",
"raw-loader": "^4.0.2",
"rimraf": "^5.0.0",
"semver": "^7.5.2",
"setimmediate": "^1.0.5",
"string-replace-loader": "3",
"style-loader": "2",
"stylelint": "^15.10.1",
"stylelint-config-standard": "^34.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-prune": "^0.10.3",
"typescript": "5.1.6",
"webpack": "^4.47.0",
"util": "^0.12.5",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.15.1",

View file

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

View file

@ -49,10 +49,9 @@
<% }
} %>
<% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) {
var tag = htmlWebpackPlugin.tags.headTags[i];
var path = tag.attributes && tag.attributes.href;
if (path.includes("/Inter/")) { %>
<% for (const tag of htmlWebpackPlugin.tags.headTags) {
let path = tag.attributes && tag.attributes.href;
if (path && path.includes("/Inter/")) { %>
<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 "./modernizr";
// Make setImmediate available in bundle
import "setimmediate";
// 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
// in webpack.config.js

View file

@ -146,14 +146,6 @@ module.exports = (env, argv) => {
bail: true,
node: {
// Mock out the NodeFS module: The opus decoder imports this wrongly.
fs: "empty",
net: "empty",
tls: "empty",
crypto: "empty",
},
entry: {
bundle: "./src/vector/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.
// 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
// 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
"$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: {
@ -708,7 +710,15 @@ module.exports = (env, argv) => {
console.log(`::warning title=Sentry error::${err.message}`);
},
}),
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),
output: {

1605
yarn.lock

File diff suppressed because it is too large Load diff