Skip to content

Feat/update webpackdevserver #249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rtaieb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Feat/update webpackdevserver #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 24 additions & 42 deletions config/webpack.config.js
View file
Open in desktop
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 ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
Expand All @@ -24,6 +22,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 @@ -167,16 +166,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 @@ -194,7 +191,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 @@ -240,25 +237,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 @@ -311,7 +293,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 @@ -321,11 +313,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 @@ -604,7 +595,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 @@ -627,7 +618,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 @@ -687,18 +681,6 @@ module.exports = function(webpackEnv) {
silent: true
})
].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
Open in desktop
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 @@ -43,6 +43,7 @@
"core-js": "^3.8.1",
"crisp-sdk-web": "^1.0.18",
"css-loader": "^3.6.0",
"css-minimizer-webpack-plugin": "^4.2.2",
"csv-stringify": "^5.3.6",
"date-fns": "^2.29.3",
"dotenv": "^8.2.0",
Expand All @@ -55,12 +56,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 @@ -71,7 +72,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 @@ -98,14 +99,15 @@
"sass-loader": "^9.0.0",
"semver": "^7.5.4",
"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 @@ -167,6 +169,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { usePageTitle } from "../common/UsePageTitle";
// 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