Skip to content

Commit

Permalink
Upgrade to webpack 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtaieb
rtaieb committed Oct 21, 2022
1 parent 2bfe3ea commit fad5ca0
Show file tree
Hide file tree
Showing 4 changed files with 480 additions and 1,394 deletions.
66 changes: 24 additions & 42 deletions config/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const safePostCssParser = require("postcss-safe-parser");
const ManifestPlugin = require("webpack-manifest-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
Expand All @@ -25,6 +23,7 @@ const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpack
const postcssNormalize = require("postcss-normalize");

const appPackageJson = require(paths.appPackageJson);
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
Expand Down Expand Up @@ -168,16 +167,14 @@ module.exports = function(webpackEnv) {
entry: entries,
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
path: isEnvProduction ? paths.appBuild : "/",
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? "static/js/[name].[contenthash:8].js"
: isEnvDevelopment && "static/js/[name].bundle.js",
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? "static/js/[name].[contenthash:8].chunk.js"
Expand All @@ -195,7 +192,7 @@ module.exports = function(webpackEnv) {
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
// Prevents conflicts when multiple Webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
chunkLoadingGlobal: `webpackJsonp${appPackageJson.name}`,
// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: "this"
Expand Down Expand Up @@ -241,25 +238,10 @@ module.exports = function(webpackEnv) {
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true
}
},
sourceMap: shouldUseSourceMap
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true
}
: false
}
})
// sourceMap: shouldUseSourceMap
}),
new CssMinimizerPlugin()
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
Expand Down Expand Up @@ -312,7 +294,17 @@ module.exports = function(webpackEnv) {
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
]
],
fallback: {
module: false,
dgram: false,
dns: false,
fs: false,
http2: false,
net: false,
tls: false,
child_process: false
}
},
resolveLoader: {
plugins: [
Expand All @@ -322,11 +314,10 @@ module.exports = function(webpackEnv) {
]
},
module: {
strictExportPresence: true,
strictExportPresence: false,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },

// First, run the linter.
// It's important to do this before Babel processes the JS.
{
Expand Down Expand Up @@ -605,7 +596,7 @@ module.exports = function(webpackEnv) {
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
new WebpackManifestPlugin({
fileName: "asset-manifest.json",
publicPath: publicPath,
generate: (seed, files, entrypoints) => {
Expand All @@ -628,7 +619,10 @@ module.exports = function(webpackEnv) {
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
Expand Down Expand Up @@ -695,18 +689,6 @@ module.exports = function(webpackEnv) {
release: process.env.REACT_APP_SENTRY_RELEASE
})
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
module: "empty",
dgram: "empty",
dns: "mock",
fs: "empty",
http2: "empty",
net: "empty",
tls: "empty",
child_process: "empty"
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false
Expand Down
25 changes: 14 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"@datapunt/matomo-tracker-react": "0.5.1",
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@graphiql/toolkit": "^0.8.0",
"@graphiql/toolkit": "0.8.0",
"@mui/icons-material": "^5.4.2",
"@mui/lab": "^5.0.0-alpha.70",
"@mui/lab": "^5.0.0-alpha.104",
"@mui/material": "^5.4.3",
"@mui/styles": "^5.4.2",
"@mui/x-date-pickers": "^5.0.3",
Expand All @@ -41,6 +41,7 @@
"common": "0.1.0",
"core-js": "^3.8.1",
"css-loader": "^3.2.0",
"css-minimizer-webpack-plugin": "^4.2.2",
"csv-stringify": "^5.3.6",
"date-fns": "^2.29.3",
"dotenv": "^8.2.0",
Expand All @@ -53,12 +54,12 @@
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "^4.3.0",
"file-loader": "^6.2.0",
"file-saver": "^2.0.5",
"fs-extra": "^8.1.0",
"graphiql": "^2.0.9",
"graphiql": "2.0.9",
"graphql": "^15.0.0",
"html-webpack-plugin": "^4.5.1",
"html-webpack-plugin": "^5.5.0",
"http-proxy-middleware": "^1.0.5",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
Expand All @@ -69,7 +70,7 @@
"lodash": "^4.17.19",
"mini-css-extract-plugin": "^0.8.0",
"moment": "^2.29.4",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"path-browserify": "^1.0.1",
"pnp-webpack-plugin": "^1.5.0",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
Expand All @@ -95,14 +96,15 @@
"sass-loader": "^8.0.0",
"semver": "^6.3.0",
"source-map-explorer": "^2.5.2",
"style-loader": "1.0.0",
"terser-webpack-plugin": "^2.3.6",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"ts-pnp": "^1.1.5",
"typescript": "^3.7.5",
"url-loader": "^2.3.0",
"webpack": "^4.46.0",
"url": "^0.11.0",
"url-loader": "^4.1.1",
"webpack": "^5.74.0",
"webpack-dev-server": "^4.11.1",
"webpack-manifest-plugin": "^2.2.0",
"webpack-manifest-plugin": "^5.0.0",
"workbox-webpack-plugin": "^6.0.2"
},
"resolutions": {
Expand Down Expand Up @@ -164,6 +166,7 @@
"eslint-config-react-app": "^5.2.0",
"eslint-plugin-prettier": "^3.1.2",
"graceful-fs": "^4.2.10",
"graphql-ws": "^5.11.2",
"jest-enzyme": "^7.1.2",
"lint-staged": "^10.0.7",
"marked": "^4.1.1",
Expand Down
2 changes: 1 addition & 1 deletion web/landing/partners.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Emoji from "../common/Emoji";
// This condition actually should detect if it's a Node environment
if (typeof require.context === "undefined") {
const fs = require("fs");
const path = require("path");
const path = require("path-browserify");

require.context = (
base = ".",
Expand Down
Loading

0 comments on commit fad5ca0

Please sign in to comment.