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