Load all css and Js files starting with name main.*.css and main.*.js

Question

In my index.html , i want to load all css and js files matching certain pattern.

<link href="https://abc.xyz.com/static/css/main.*.css">
<script src="https://abc.xyz.com/static/js/main.*.js"></script>

eg- all files which matches name main.abc.css , main.788.css and main.abc.js and main.6788.js

Answer 1

This cannot be achieved straight forward. As you can see, the value of the href attribute is a string. The browser would read the whole string as is.

In order to do this, you'll have to work with how you package your JS/CSS files.

Option 1 : You can use a bundler like webpack to package the files as you require into separate JS/CSS files, based on the patterns you want to use.

Option 2 : Use a server side script. You can get the list of files in the path, iterate over them and include the ones you want to. This is not recommended though. It is always safer to include only those files that you want to include