webpack

Point webpack at the page in webpack.config.js:
Webpack parses the page, bundles everything it references, and rewrites the URLs. No loader, no plugin.
Prefer a video walkthrough? Watch one here
Then run webpack on the command-line. HTML, CSS and JavaScript are all handled by webpack itself, so dist/ ends up with the page and the assets it points at.
--mode development leaves the page and the stylesheet unminified and maps the bundle back to your own files in browser devtools, so what you debug looks like what you wrote.
--mode production minifies the page, the stylesheet and the script, and drops the code nothing uses. That is the build you deploy.
Get Started quickly in our Guides section, or dig into the Concepts section for more high-level information on the core notions behind webpack. The Native HTML and Native CSS guides cover what the built-in support does, and how to migrate an existing setup onto it.
Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy