KevinMidboe/seasoned
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasoned.git synced 2026-03-11 11:55:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

replace webpack w/ vite

Browse Source
This commit is contained in:
Kevin
2026-02-23 16:47:19 +01:00
parent e427d9db26
commit 3e5267933c
10 changed files with 819 additions and 11019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
package.json
View File

@@ -5,10 +5,8 @@
"author": "Kevin Midboe", "author": "Kevin Midboe",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "NODE_ENV=development webpack server", "dev": "NODE_ENV=development vite",
"build": "yarn build:ts && yarn build:webpack", "build": "yarn vite build",
"build:ts": "tsc --project tsconfig.json",
"build:webpack": "NODE_ENV=production webpack-cli build --progress",
"postbuild": "cp public/dist/index.html public/index.html", "postbuild": "cp public/dist/index.html public/index.html",
"clean": "rm -r public/dist 2> /dev/null; rm public/index.html 2> /dev/null; rm -r lib 2> /dev/null", "clean": "rm -r public/dist 2> /dev/null; rm public/index.html 2> /dev/null; rm -r lib 2> /dev/null",
"start": "echo 'Start using docker, consult README'", "start": "echo 'Start using docker, consult README'",
@@ -17,45 +15,15 @@
}, },
"dependencies": { "dependencies": {
"chart.js": "3.9.1", "chart.js": "3.9.1",
"connect-history-api-fallback": "2.0.0", "vue": "3.5.28",
"dotenv": "^16.0.1", "vue-router": "5.0.3",
"express": "4.18.1", "vuex": "4.1.0"
"vue": "3.2.37",
"vue-router": "4.1.3",
"vuex": "4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.18.10", "@vitejs/plugin-vue": "^5.2.1",
"@babel/plugin-transform-runtime": "7.18.10",
"@babel/preset-env": "7.18.10",
"@babel/runtime": "7.18.9",
"@types/express": "4.17.13",
"@types/node": "18.6.1",
"@typescript-eslint/eslint-plugin": "5.33.0",
"@typescript-eslint/parser": "5.33.0",
"@vue/cli": "5.0.8",
"@vue/cli-service": "5.0.8",
"@vue/eslint-config-airbnb": "6.0.0",
"babel-loader": "8.2.5",
"css-loader": "6.7.1",
"documentation": "13.2.5",
"eslint": "8.21.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-vue": "9.3.0",
"eslint-plugin-vuejs-accessibility": "1.2.0",
"file-loader": "6.2.0",
"html-webpack-plugin": "5.5.0",
"prettier": "2.7.1", "prettier": "2.7.1",
"sass": "1.54.3", "sass": "1.54.3",
"sass-loader": "13.0.2",
"terser-webpack-plugin": "5.3.3",
"ts-loader": "9.3.1",
"typescript": "4.7.4", "typescript": "4.7.4",
"vue-loader": "17.0.0", "vite": "^6.0.3"
"webpack": "5.74.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.9.3"
} }
} }

2
src/App.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div id="app"> <div id="content">
<!-- Header and hamburger navigation --> <!-- Header and hamburger navigation -->
<NavigationHeader class="header" /> <NavigationHeader class="header" />

5
src/api.ts
View File

@@ -1,7 +1,8 @@
import { IList, IMediaCredits, IPersonCredits } from "./interfaces/IList"; import { IList, IMediaCredits, IPersonCredits } from "./interfaces/IList";
const { ELASTIC, ELASTIC_INDEX } = process.env; const ELASTIC = import.meta.env.VITE_ELASTIC;
const API_HOSTNAME = window.location.origin; const ELASTIC_INDEX = import.meta.env.VITE_ELASTIC_INDEX;
const API_HOSTNAME = import.meta.env.VITE_SEASONED_API;
// - - - TMDB - - - // - - - TMDB - - -

2
src/index.html
View File

@@ -24,7 +24,7 @@
<meta name="theme-color" content="#081c24" /> <meta name="theme-color" content="#081c24" />
</head> </head>
<body> <body>
<div id="entry"></div> <div id="app"></div>
</body> </body>
<script <script

5
src/main.ts
View File

@@ -4,7 +4,7 @@ import store from "./store";
import Toast from "./plugins/Toast"; import Toast from "./plugins/Toast";
// eslint-disable-next-line @typescript-eslint/no-var-requires // eslint-disable-next-line @typescript-eslint/no-var-requires
const App = require("./App.vue").default; import App from "./App.vue";
store.dispatch("darkmodeModule/findAndSetDarkmodeSupported"); store.dispatch("darkmodeModule/findAndSetDarkmodeSupported");
store.dispatch("user/initUserFromCookie"); store.dispatch("user/initUserFromCookie");
@@ -14,4 +14,5 @@ const app = createApp(App);
app.use(router); app.use(router);
app.use(store); app.use(store);
app.use(Toast); app.use(Toast);
app.mount("#entry");
app.mount("#app");

10
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
interface ImportMetaEnv {
readonly VITE_SEASONED_API: string;
readonly VITE_ELASTIC: string;
readonly VITE_ELASTIC_INDEX: string;
readonly VITE_SEASONED_DOMAIN: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

3
tsconfig.json
View File

@@ -12,7 +12,8 @@
"outDir": "lib", "outDir": "lib",
"baseUrl": "/", "baseUrl": "/",
"paths": { "paths": {
"@": ["src"] "@/*": ["./src/*"],
"scss/*": ["./src/scss/*"]
} }
}, },
"include": [ "include": [

14
vite.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vite.dev/config/
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
scss: path.resolve(__dirname, "./src/scss")
}
},
plugins: [vue()]
});

157
webpack.config.js
View File

@@ -1,157 +0,0 @@
const path = require("path");
const webpack = require("webpack");
const sass = require("sass");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const TerserPlugin = require("terser-webpack-plugin");
const dotenv = require("dotenv").config({ path: "./.env" });
const dotenvExample = require("dotenv").config({ path: "./.env.example" });
const sourcePath = path.resolve(__dirname, "src");
const indexFile = path.join(sourcePath, "index.html");
const javascriptEntry = path.join(sourcePath, "main.ts");
const publicPath = path.resolve(__dirname, "public");
const isProd = process.env.NODE_ENV === "production";
const variables = dotenv.parsed || dotenvExample.parsed;
// Merge inn all process.env values that match dotenv keys
Object.keys(process.env).forEach(key => {
if (key in variables) {
variables[key] = process.env[key];
}
});
module.exports = {
mode: process.env.NODE_ENV,
context: publicPath,
entry: javascriptEntry,
output: {
path: `${publicPath}/dist/`,
publicPath: "/dist/",
filename: "[name].[contenthash].js",
clean: true
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
},
exclude: /node_modules/
},
{
test: /\.vue$/,
use: ["vue-loader"]
},
{
test: /\.ts$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.scss$/,
use: [
"vue-style-loader",
// isProd ? MiniCssExtractPlugin.loader : "vue-style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]"
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HTMLWebpackPlugin({
template: indexFile,
filename: "index.html",
minify: isProd
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(variables)
})
],
resolve: {
extensions: [".js", ".ts", ".vue", ".json", ".scss"],
alias: {
vue: "@vue/runtime-dom",
"@": path.resolve(__dirname, "src"),
src: path.resolve(__dirname, "src"),
assets: `${publicPath}/assets`,
components: path.resolve(__dirname, "src/components")
}
},
devtool: "source-map",
performance: {
hints: false
},
optimization: {
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
}
}
}
},
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
sourceMap: true
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
}
})
]
},
devServer: {
static: publicPath,
historyApiFallback: {
index: "/dist/index.html"
},
compress: true,
hot: true,
port: 8080
}
};
if (isProd) {
module.exports.mode = "production";
module.exports.devtool = false;
module.exports.performance.hints = "warning";
}
// enable proxy for anything that hits /Api
// View README or update src/config.ts:SEASONED_API_URL
const { SEASONED_API } = process.env;
if (SEASONED_API) {
module.exports.devServer.proxy = {
"/api": {
target: SEASONED_API,
changeOrigin: true
}
};
}

11594
yarn.lock
View File

File diff suppressed because it is too large Load Diff