From 12cd2de3ac2e97d1673007009c07f69310705098 Mon Sep 17 00:00:00 2001 From: Milan Hauth Date: Fri, 25 Nov 2022 18:34:51 +0100 Subject: [PATCH] webpack to vite --- .gitignore | 1 + dist/.gitignore | 1 - package.json | 8 +- src/client/{index.ejs => index.html} | 4 +- src/client/index.scss | 10 +-- vite.config.js | 44 +++++++++++ webpack.config.js | 107 --------------------------- 7 files changed, 57 insertions(+), 118 deletions(-) delete mode 100644 dist/.gitignore rename src/client/{index.ejs => index.html} (79%) create mode 100644 vite.config.js delete mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore index 06307c4756..4015f352ef 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ node_modules /sessions /.env* /session-store.db +/dist/ diff --git a/dist/.gitignore b/dist/.gitignore deleted file mode 100644 index 72e8ffc0db..0000000000 --- a/dist/.gitignore +++ /dev/null @@ -1 +0,0 @@ -* diff --git a/package.json b/package.json index e31a0b2146..06e5a0afac 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,8 @@ "make:application": "osjs-cli make:application", "make:iframe-application": "osjs-cli make:iframe-application", "make:provider": "osjs-cli make:provider", - "build": "webpack", - "watch": "webpack --watch" + "build": "vite build", + "watch": "vite build --watch" }, "keywords": [ "osjs" @@ -27,8 +27,8 @@ "license": "BSD-2-Clause", "devDependencies": { "@osjs/dev-meta": "^2.1.0", - "html-webpack-plugin": "^3.2.0", - "source-map-loader": "^0.2.4" + "vite": "^3.2.4", + "vite-plugin-html": "^3.2.0" }, "dependencies": { "@osjs/calculator-application": "^1.2.8", diff --git a/src/client/index.ejs b/src/client/index.html similarity index 79% rename from src/client/index.ejs rename to src/client/index.html index 0574cac807..a795554f4d 100644 --- a/src/client/index.ejs +++ b/src/client/index.html @@ -10,7 +10,9 @@ - <%= htmlWebpackPlugin.options.title %> + OS.js + + diff --git a/src/client/index.scss b/src/client/index.scss index 2327dbcb32..402517a94b 100644 --- a/src/client/index.scss +++ b/src/client/index.scss @@ -34,11 +34,11 @@ // OS.js defaults. // -@import "~typeface-roboto/index.css"; -@import "~@osjs/client/dist/main.css"; -@import "~@osjs/gui/dist/main.css"; -@import "~@osjs/dialogs/dist/main.css"; -@import "~@osjs/panels/dist/main.css"; +@import "typeface-roboto/index.css"; +@import "@osjs/client/dist/main.css"; +@import "@osjs/gui/dist/main.css"; +@import "@osjs/dialogs/dist/main.css"; +@import "@osjs/panels/dist/main.css"; body, html { diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000000..6fe272636b --- /dev/null +++ b/vite.config.js @@ -0,0 +1,44 @@ +// @ts-ignore +const npm = require('./package.json'); + +const assetsDir = ''; +//const assetsDir = 'assets/'; + +const outputDefaults = { + //format: 'iife', // default + // remove hashes from filenames + entryFileNames: `${assetsDir}[name].js`, + chunkFileNames: `${assetsDir}[name].js`, + assetFileNames: `${assetsDir}[name].[ext]`, +}; + +/** @type {import("vite").UserConfig} */ +module.exports = { + clearScreen: false, + root: "src/client", + base: "./", // generate relative paths in html + define: { + OSJS_VERSION: JSON.stringify(npm.version), + }, + worker: { + rollupOptions: { + output: { + ...outputDefaults, + } + }, + }, + build: { + outDir: "../../dist", // relative to root + emptyOutDir: true, + target: 'esnext', + minify: false, + sourcemap: true, + rollupOptions: { + output: { + ...outputDefaults, + }, + }, + }, + plugins: [ + ], +}; diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index ab4ed0a50f..0000000000 --- a/webpack.config.js +++ /dev/null @@ -1,107 +0,0 @@ -const path = require('path'); -const mode = process.env.NODE_ENV || 'development'; -const minimize = mode === 'production'; -const webpack = require('webpack'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const {DefinePlugin} = webpack; -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); -const npm = require('./package.json'); -const plugins = []; - -if (mode === 'production') { - plugins.push(new OptimizeCSSAssetsPlugin({ - cssProcessorOptions: { - discardComments: true, - map: { - inline: false - } - }, - })); -} - -module.exports = { - mode, - devtool: 'source-map', - entry: { - osjs: path.resolve(__dirname, 'src/client/index.js') - }, - performance: { - maxEntrypointSize: 500 * 1024, - maxAssetSize: 500 * 1024 - }, - optimization: { - minimize, - splitChunks: { - chunks: 'all' - } - }, - plugins: [ - new DefinePlugin({ - OSJS_VERSION: npm.version - }), - new HtmlWebpackPlugin({ - template: path.resolve(__dirname, 'src/client/index.ejs'), - favicon: path.resolve(__dirname, 'src/client/favicon.png'), - title: 'OS.js' - }), - new MiniCssExtractPlugin({ - filename: '[name].css' - }), - ...plugins - ], - module: { - rules: [ - { - test: /\.(svg|png|jpe?g|gif|webp)$/, - use: [ - { - loader: 'file-loader' - } - ] - }, - { - test: /\.(eot|svg|ttf|woff|woff2)$/, - include: /typeface/, - use: { - loader: 'file-loader', - options: { - name: 'fonts/[name].[ext]' - } - } - }, - { - test: /\.(sa|sc|c)ss$/, - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - sourceMap: true - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: true - } - } - ] - }, - { - test: /\.js$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader' - } - }, - { - test: /\.js$/, - enforce: 'pre', - use: { - loader: 'source-map-loader' - } - } - ] - } -};