How do I bundle CSS and js files into a single HTML file?

Question

Is there a way webpack can process my HTML tags such as

<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>

And bundle them into

<style>
  //contents of minified style.css 
</style>
<script>
  //bundled and minified script.js
</script>

So I can serve a single file from my servers? I managed to do this with the Processhtml grunt plugin, but I'm not using grunt as build system on this project.

Maybe html-webpack-plugin is worth a look? I have a feeling you could apply a couple of loaders within a template through it to pull this off. — Juho Vepsäläinen
– Juho Vepsäläinen, Commented Apr 3, 2016 at 7:14

Frederick Mfinanga · Accepted Answer · 2016-04-04 00:35:09Z

2

You can achieve this with webpack using; extract-text-webpack-plugin, html-webpack-plugin and UglifyJsPlugin there's also uglify loader if you want to uglify during bundling, as the plugin does the uglify after the bundle is created.

answered Apr 4, 2016 at 0:35

Frederick Mfinanga

1,1552 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danny Z · Accepted Answer · 2019-09-19 04:14:26Z

0

html-webpack-inline-source-plugin should be what you're looking for. It is a plugin for html-webpack-plugin which itself is a plugin for webpack. So basically works as a plugin for a plugin for webpack. The github page shows a very simple example on how to do exactly what you're looking for.

answered Sep 19, 2019 at 4:14

Danny Z

6796 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do I bundle CSS and js files into a single HTML file?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related