JezK

Edit File: webpack.config.js

const path = require("path"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const TerserPlugin = require("terser-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); const webpack = require("webpack"); module.exports = { entry: `./vue-frontend/src/main.ts`, output: { path: path.resolve(__dirname, "./vue-frontend/dist/"), filename: "[name].js", }, module: { rules: [ { test: /\.vue$/, loader: "vue-loader", options: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("hp-"), }, }, }, { test: /\.ts$/, loader: "ts-loader", options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true, configFile: path.resolve(__dirname, 'vue-frontend/tsconfig.json') }, exclude: /node_modules/, }, { test: /\.s?[c]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)$/i, use: "url-loader?limit=2048", }, ], }, optimization: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin({ terserOptions: { compress: { drop_console: true, }, }, }), ], }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: "[name].css", }), // new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, }), ], resolve: { extensions: [".ts", ".tsx", ".js", ".vue"], alias: { "@": path.resolve(__dirname, "vue-frontend/src/"), "@vue-frontend": path.resolve(__dirname, "vue-frontend/"), }, fallback: { punycode: require.resolve("punycode/"), }, }, };