mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 03:49:07 +00:00
replace webpack w/ vite
This commit is contained in:
46
package.json
46
package.json
@@ -5,10 +5,8 @@
|
||||
"author": "Kevin Midboe",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "NODE_ENV=development webpack server",
|
||||
"build": "yarn build:ts && yarn build:webpack",
|
||||
"build:ts": "tsc --project tsconfig.json",
|
||||
"build:webpack": "NODE_ENV=production webpack-cli build --progress",
|
||||
"dev": "NODE_ENV=development vite",
|
||||
"build": "yarn vite build",
|
||||
"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",
|
||||
"start": "echo 'Start using docker, consult README'",
|
||||
@@ -17,45 +15,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"chart.js": "3.9.1",
|
||||
"connect-history-api-fallback": "2.0.0",
|
||||
"dotenv": "^16.0.1",
|
||||
"express": "4.18.1",
|
||||
"vue": "3.2.37",
|
||||
"vue-router": "4.1.3",
|
||||
"vuex": "4.0.2"
|
||||
"vue": "3.5.28",
|
||||
"vue-router": "5.0.3",
|
||||
"vuex": "4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.18.10",
|
||||
"@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",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"prettier": "2.7.1",
|
||||
"sass": "1.54.3",
|
||||
"sass-loader": "13.0.2",
|
||||
"terser-webpack-plugin": "5.3.3",
|
||||
"ts-loader": "9.3.1",
|
||||
"typescript": "4.7.4",
|
||||
"vue-loader": "17.0.0",
|
||||
"webpack": "5.74.0",
|
||||
"webpack-cli": "4.10.0",
|
||||
"webpack-dev-server": "4.9.3"
|
||||
"vite": "^6.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="content">
|
||||
<!-- Header and hamburger navigation -->
|
||||
<NavigationHeader class="header" />
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { IList, IMediaCredits, IPersonCredits } from "./interfaces/IList";
|
||||
|
||||
const { ELASTIC, ELASTIC_INDEX } = process.env;
|
||||
const API_HOSTNAME = window.location.origin;
|
||||
const ELASTIC = import.meta.env.VITE_ELASTIC;
|
||||
const ELASTIC_INDEX = import.meta.env.VITE_ELASTIC_INDEX;
|
||||
const API_HOSTNAME = import.meta.env.VITE_SEASONED_API;
|
||||
|
||||
// - - - TMDB - - -
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<meta name="theme-color" content="#081c24" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="entry"></div>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
<script
|
||||
|
||||
@@ -4,7 +4,7 @@ import store from "./store";
|
||||
import Toast from "./plugins/Toast";
|
||||
|
||||
// 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("user/initUserFromCookie");
|
||||
@@ -14,4 +14,5 @@ const app = createApp(App);
|
||||
app.use(router);
|
||||
app.use(store);
|
||||
app.use(Toast);
|
||||
app.mount("#entry");
|
||||
|
||||
app.mount("#app");
|
||||
|
||||
10
src/vite-env.d.ts
vendored
Normal file
10
src/vite-env.d.ts
vendored
Normal 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;
|
||||
}
|
||||
@@ -12,7 +12,8 @@
|
||||
"outDir": "lib",
|
||||
"baseUrl": "/",
|
||||
"paths": {
|
||||
"@": ["src"]
|
||||
"@/*": ["./src/*"],
|
||||
"scss/*": ["./src/scss/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
|
||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal 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()]
|
||||
});
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user