webpack VS react-app-rewired

The main reason for writing this post is that although Vite is an excellent tool, it is still relatively new and sometimes lacks extensive documentation. When I initially had to set up a Vite npm package, it took me more time than I'd care to admit to get it working properly. Therefore, I've decided to create this post to help individuals who may be facing a similar situation and are looking for an alternative to Webpack.

i was pleased to see webpack continuing to push out releases recently, i am just speculating but maybe there was a passing of the torch because all previous releases before march of this year were done by sokra and now done by thelarkinn (https://github.com/webpack/webpack/releases)

Webpack supports the imports field starting from v5.0. Path aliases work without any additional configuration. Here is the Webpack configuration I used to build a test project with TypeScript:

Run webpack compilation to generate a browser-compatible bundle and emit bundle size metrics

Even, there are several bundling tools available, including popular ones like Webpack and Snowpack.

The webpack pull request that introduced the cacheWebWorker experiment: https://github.com/webpack/webpack/pull/13262

Issue I found recently working on a security suite build

Webpack is a static module bundler for modern JavaScript applications. On processing your application - Webpack internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets from which content is served.

The other option I want to highlight is packaging the project using something like Webpack or esbuild. JS Bundlers transpile all of your separate files and classes (along with all node_modules) into one single file, a practice originally developed to reduce package size for frontend applications. This helps improve the cold start time in Lambda, as unimported files can be pruned and the entire handler becomes one file.

Ejecting a React app is a bad idea because our application will lose all the React configurations and will not benefit from the CRA updates. Some solutions for ejecting our application include using packages like react-app-rewired or rewire. You can also use CRACO to eject your React application, but it needs you to install additional plugins.

Heads up: CRA5 bumped their webpack dependency to a version that no longer supports node polyfills in browsers. This breaks the builds of nearly all Ethereum-related projects today. A common workaround that avoids ejecting is to hook into the CRA build process. We’re using react-app-rewired but you could simply stay at CRA4 until the community comes up with a better solution.

CRA is good to get something running quick (and it uses webpack underneat!). In the past I've tweaked the webpack config using things like https://github.com/timarney/react-app-rewired when needed, but for all my "serious" projects I ended up ejecting and learning webpack! For my next project I'll try to skip CRA altogether!

// Overrides create-react-app webpack configs without ejecting // https://github.com/timarney/react-app-rewired const { addBabelPlugins, override } = require("customize-cra"); module.exports = override( ...addBabelPlugins( "babel-plugin-myPlugin" /* Add plug-in names here (separate each value by a comma) */ ) );

If Create React App supported Yarn workspaces out-of-the-box, what we've done so far would have been enough to run the app... unfortunately, it doesn't. Luckily, we can use CRACO (or other tools such as customize-cra or react-app-rewired) to customize the Webpack configuration used by Create React App to resolve packages imported from other workspaces.

Enter react-app-rewired. What this package does is it allows you to hook into the Webpack config process so you can change settings, add loaders or plugins, and so on. It's like having all the pros of ejecting (mainly, access to the webpack.config.js) without actually ejecting.

Switch to craco from react-app-rewired for better CRA v4 support (breaking change!)