Compile sass files to hashed css using webpack - css

Question

to compile my .scss files I use webpack.
What i want to achieve is to get for example
styles.b0eda78ad870282c8cb9fd58884415d7.css
instead of
styles.css
When I add to webpack option [hash] (now commented in source) - then every change in .scss files generate new .css files. For example 3 changes in .scss will generate 3 new files with different hashes:
themeA.b0eda78ad870282c8cb9fd58884415d7.css
themeA.2c0521243fe51696a6d08ae5443a6721.css
themeA.6ebd2d65f4d311fbac8441141826a9a8.css
I want only to update one css file with new hash and do not create new files.
My webpack configuration
const themeA = `${mainDirectory}/commons/themeA.scss`;
const themeB = `${mainDirectory}/commons/scss/shop/themeB.scss`;
const themeC = `${mainDirectory}/commons/themeC.scss`;
const themeD = `${mainDirectory}/commons/scss/shop/themeD.scss`;
let sassFiles;
const themeMap = new Map([
['a', themeA],
['b', themeB],
['c', themeC],
['d', themeD],
]);
if (theme === undefined) {
sassFiles = [...themeMap.values()];
} else {
sassFiles = [
`${mainDirectory}/commons/${theme}.scss`,
`${mainDirectory}/commons/scss/shop/${theme}_shop.scss`,
];
}
module.exports = {
entry: [...sassFiles],
mode: 'development',
output: {
path: path.resolve(mainDirectory, 'commons'),
filename: 'hot/sassBundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.scss$/,
sideEffects: true,
use: [
{
loader: 'file-loader',
options: {
minimize: true,
name: '[name].css',
// hashed css
// name: '[name].[hash].css',
outputPath: '/css',
},
},
{
loader: 'extract-loader',
},
{
loader: 'css-loader',
options: {
url: false,
sourceMap: !buildMode,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: !buildMode,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: !buildMode,
convertToAbsoluteUrls: false,
},
},
],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
},
{
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=100000',
},
],
},
plugins: [
new webpack.SourceMapDevToolPlugin({}),
new ReplaceInFileWebpackPlugin([
{
dir: `${mainDirectory}/commons/css/`,
test: [/\.css$/],
rules: [
{
search: /\/\*# sourceURL.+\\*/g,
replace: '',
},
],
},
]),
],
};