Our situation is peculiar: we have Golang templates, which have a mixture of server-rendered HTML and assets for the front-end (HTML/CSS/JS tags). We're moving away from <script> tags everywhere and jQuery, and towards ReactJS and Webpack managing the assets.
Template
A typical template in our project looks something like :
{{/* some Golang template logic */}}
<link rel=stylesheet href="/static/css/[some-folder-or-folders]/[css-file].css">
<script src="/static/js/ViewModelViews/[some-folder-or-folders]/bundle.js"></script>
{{end}}
Webpack config
Our webpack config, as of yesterday, when I split out the node_modules from all the bundle files, is like this:
module.exports = {
node: {
fs: "empty"
},
entry: entryObj,
output: {
path: path.resolve(__dirname, `./static/js`),
filename: '[name]/bundle.js'
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
plugins: ["transform-class-properties"]
}
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new NodemonPlugin(),
]
}
I was able to split out all the node_modules into vendors/bundle.js, but for some reason, I cannot get the browser to cache it.
I explicitly include that file, like this on the base.html :
<!DOCTYPE html>
<html>
<head>
<!-- some irrelevant logic -->
</head>
<body>
<!-- a bunch of irrelevant logic -->
<script src="/static/js/vendors/bundle.js"></script>
<!-- other global bundle files -->
</body>
</html>
How do I get the vendors/bundle.js to cache, while still being in control of how we use the other bundle files? I see people using hashcodes in the filenames, which would break our imports of our business logic.
Network section of Dev Tools
When I go to landing page, there is browser request for the vendors/bundle.js:
The request happens again, when I go to another page!
