Webpack replace asset for cache busting - html

Question

I have question, might be really silly as I am a beginner with Webpack but so far impressed.
So, I have a really small personal project with Flask(Python) on the backend and React on the frontend and I'm fighting with cache busting (I mean, not now, while I'm developing no problem whatsoever with cache, but I'm worrying already for when I deploy).
I am using Webpack to bundle the js and css (right now just the js though). So I was wondering if it is possible with Webpack for me to write, say in the css, something like:
some-selector {
background: #00ff00 url("my-background.png") no-repeat fixed center;
}
or in the HTML
<script src="bundle.js"></script>
and have Webpack to replace those strings with the resource with a cache busting hash for when building for production?
like
some-selector {
background: #00ff00 url("my-background.987asdh23193jf13.png") no-repeat fixed center;
}
and
<script src="bundle.23kjbi24f92do20f.js"></script>
I saw some sutff about html-webpack-plugin or string-replace-loader but not quite what I was looking for.
So, the questions:
is it possible with Webpack?
is it possible at all?
is there a better way to do it?

Answer 1

Yes it is possible to do cache busting using webpack and you can use this code for that or reference is https://medium.com/#okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.nctflpxl2
I never tried for images but it is also possible using webpack.
var webpack = require('webpack');
const path = require("path");
var ChunkHashReplacePlugin = require('chunkhash-replace-webpack-plugin');
var WebpackMd5Hash = require('webpack-md5-hash');
var ManifestPlugin = require('webpack-manifest-plugin');
var node_dir = __dirname + '/node_modules';
var HtmlWebpackPlugin = require('html-webpack-plugin');
var InlineManifestWebpackPlugin=require('inline-manifest-webpack-plugin');
module.exports = {
context: __dirname + '/app',
entry: {
app: './app.js',
vendor: ['angular', 'underscore', 'restangular', 'angular-ui-router', 'bootstrap', 'angular-ui-bootstrap', 'angular-animate', 'angular-sanitize']
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js"
// filename: "[name].[chunkhash].bundle.js"
},
plugins: [
function() {
this.plugin("done", function(stats) {
require("fs").writeFileSync(
path.join(__dirname, "js", "stats.json"),
JSON.stringify(stats.toJson()));
});
},
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.ProvidePlugin({
_: "underscore",
underscore: "underscore"
}),
new webpack.optimize.CommonsChunkPlugin({
name: ["vendor"], // vendor libs + extracted manifest
minChunks: Infinity
}),
new ManifestPlugin({
filename: "chunk-manifest.json",
manifestVariable: "webpackManifest"
}),
new WebpackMd5Hash(),
new InlineManifestWebpackPlugin({
name: 'webpackManifest'
}),
new HtmlWebpackPlugin({
title: ' Portal',
template: 'index.ejs',
filename:'../index.html'
})
],
devServer: {
inline: true,
headers: { "Access-Control-Allow-Origin": "*" }
},
resolve: {
alias: {
"underscore": node_dir + "/underscore/underscore-min.js"
}
}
};
};