Demo for code splitting with webpack, using the practices described in these tutorials:
- Code Splitting (React documentation)
- Code Splitting (webpack documentation)
- Creating a React App… From Scratch
The src
directory contains two React components, each with their own stylesheet:
Using webpack, separate bundles were created for each of these components:
App
: bundle.js / main.cssMessage
: message.bundle.js / message.css
The App
component's JS bundle stylesheet are loaded when the page is loaded initially. It shows a simple
page with a button.
When the button is clicked, the Message
component's JS bundle and stylesheet are loaded by the browser
and a message box is displayed on the page.
https://pahund.github.io/webpack-split/
Open the file index.html
in IntelliJ IDEA and select View
> Open in browser
…or…
Copy the file index.html
and the dist
directory to a web server into a subdirectory named webpack-split
npm install
npm run build
For the sake of keeping the demo simple, there is no local development mode or hot module reloading. When
you make changes to the JavaScript or CSS source files, you have to run npm run build
again to see the changes
Copyright © 2019 mobile.de GmbH