How to use preload webpack plugin with blade templates - laravel

Question

So i have a laravel/vuejs app , i'm trying to preload the css chunks that i have generated upon splitting components, it works fine but it generates an index.html. Is it possible to somehow do it in blade templates? What could be the solution?
Here is my webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {VueLoaderPlugin} = require("vue-loader");
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path");
module.exports = {
entry: {
main: "./resources/js/app.js",
},
output: {
publicPath: '/',
path: path.resolve(__dirname, "public"),
},
plugins: [
new HtmlWebpackPlugin(),
new VuetifyLoaderPlugin(),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: `components/[name].css`
}),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks', // can be 'allChunks' or 'initial' or see more on npm page
fileBlacklist: [/\.map|.js/], // here may be chunks that you don't want to have preloaded
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader"
]
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.s[ac]ss$/i,
use: [
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
extractCSS: true
}
},
],
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](vue|axios|jquery|bootstrap)[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
}
}
And one final question , is it better to preload/prefetch the js chunks too? ( to optimize the performance )