Webpack 4 and Hashing for Long Term Caching - node.js

Question

I'm trying to add long term caching to my project.I was using CommonsChunkPlugin but now I'm trying to migrate my project to webpack 4?
And as you know CommosChunkPlugin is dead now with webpack 4.
So I decided to try splitchunks optimization and I have some issues with that.
Here is my config file.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HashedModuleIdsPlugin = require("webpack-hashed-module-id-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');
const webpack= require('webpack');
var path = require("path");
module.exports = merge(common,{
entry: {
main: './src/app.js',
vendor: ['react','react-dom','redux-thunk']
},
output: {
path: path.resolve(__dirname, "dist"),
filename:"[name].[chunkhash].bundle.js",
chunkFilename:"[name].[chunkhash].chunk.js"
},
//devtool:'source-map',
mode: 'production',
module: {
rules: [
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
chunks: 'all',
name: 'vendor',
test: 'vendor',
enforce: true
}
}
},
runtimeChunk: 'single'
},
plugins: [
new webpack.HashedModuleIdsPlugin({
// Options...
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[name].[contenthash].chunk.css"
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
})
/*,
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: 'vendor'
})*/
]
});
Output is:
And if I import a new scss file to app.js file.
import './app.scss';
The new output is:
The hash of the vendor file changed as you can see.
But why it changed?
I only import a new scss file to my entry javascript file(app.js)? What is the affect of that to my vendor hash?
Note:TextArea.[chunkhash].js is loading from the dynamic import.But I ask about vendor.js here.It is not too important in this case.

Answer 1

As lukas-reineke already suggested, there is an open issue on GitHub.
But there is a very great at medium form Tim Sebastian about this topic:
Predictable long term caching with Webpack