some problems with both vuejs 2 and webpack 4 - vue.js

Question

I have a website coded with vuejs 2 and laravel.
Question 1-) I want to compress the codes, but my codes don't work properly on the site. Where could this error come from?
Question 2-) I don't think that i made the settings which i added below correctly. What would you recommend for me to check this?
Thank you.
vue.config.js
const path = require('path');
const zlib = require('zlib');
module.exports = {
pluginOptions: {
compression:{
brotli: {
filename: '[file].br[query]',
algorithm: 'brotliCompress',
include: /\.(js|css|html|svg|json)(\?.*)?$/i,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
minRatio: 0.8,
},
gzip: {
filename: '[file].gz[query]',
algorithm: 'gzip',
include: /\.(js|css|html|svg|json)(\?.*)?$/i,
minRatio: 0.8,
}
}
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const zlib = require('zlib');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.jsx', '.scss']
},
context: __dirname,
entry: "./src/app.js",
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [new MiniCssExtractPlugin(), new HtmlWebPackPlugin(), new CompressionPlugin({
filename: "[path][base].gz",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
new CompressionPlugin({
filename: "[path][base].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg)$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
threshold: 10240,
minRatio: 0.8,
}),],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', { targets: "defaults" }]
]
}
}
},
{
test: /\.ext$/,
use: ['cache-loader', 'babel-loader'],
include: path.resolve('src'),
},
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};