How to use the index.html file as the entry file to package?

in general, take the html file as the entry, automatically find dependent images, css and js, and then name and package them with hash. The referenced images of the new html file, css and js, will be changed to the new name with the hash code.

I have 4 front-end pages

js(jquery)

cssbootstrap

hashjscss

html hash

jsjs, csscsshash htmlhashjs css

in this way, the file name encrypted by hash can be versioned to facilitate the update and iteration of the front-end static page. As long as the code on the page changes, the hash value of the corresponding code file name will be different. After being pushed to the server, users will not be unable to see the latest page because of cache problems and do not have to ctrl+f5 to clear the cache.
(because index.html filenames are not encrypted with hash, you need to set a very low cache time for home files such as index.html, or no caching)

< H1 > so which can be done by gulp or webpack? < / H1 >

Webpack webpack4 javascript html css

Mar.13,2021

your more traditional development mode, you can also try fis3

feels like the reason why jquery is not a global variable.
use the plug-in ProvidePlugin in plugins in webpack to register global variables.
try to write it down like this

or configure

externals: {
"jquery" : "jQuery"
}

Previous: Multi-layer nested Json parsing

Next: Thread safety of JAVA assignment statements, such as int a = 1 thread safety?