feat: switched bundlers to vite

2022-04-09 23:28:49 +01:00
parent efa90917be
commit cb05338a3f
14 changed files with 1827 additions and 1394 deletions
--- a/src/index.html
+++ b/src/index.html
@ -8,5 +8,6 @@
  </head>
  <body>
    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,27 +5,18 @@
  "main": "index.js",
  "scripts": {
    "start": "webpack serve",
-    "build": "webpack --mode production"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
  },
  "keywords": [],
  "author": "John Costa",
  "license": "ISC",
  "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.1",
-    "html-webpack-plugin": "^5.5.0",
+    "@vitejs/plugin-react": "^1.3.0",
    "postcss": "^8.4.5",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.0.1",
-    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
-    "webpack": "^5.65.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0"
+    "vite": "^2.9.1"
  },
  "dependencies": {
    "clsx": "^1.1.1",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,3 +1,6 @@
 module.exports = {
-  plugins: ['postcss-preset-env', require('tailwindcss'), require('autoprefixer')],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
--- a/src/components/core/Cdiv.jsx
+++ b/src/components/core/Cdiv.jsx
--- a/src/components/core/FadeComponent.jsx
+++ b/src/components/core/FadeComponent.jsx
--- a/src/components/pages/Front.page.jsx
+++ b/src/components/pages/Front.page.jsx
--- a/src/components/sections/Introduction.jsx
+++ b/src/components/sections/Introduction.jsx
--- a/src/components/text/AppearText.jsx
+++ b/src/components/text/AppearText.jsx
--- a/src/index.jsx
+++ b/src/index.jsx
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,5 +1,5 @@
 module.exports = {
-  content: ['./src/**/*.{js, jsx}'],
+  content: ['./components/**/*.{html,js,jsx}', './public/index.html', './src/**/*.{html,js,jsx}'],
  theme: {
    extend: {
      colors: {
@ -29,7 +29,7 @@ module.exports = {
        },
      },
      fontFamily: {
-        display: ['Calibre'],
+        display: ['Inter'],
      },
    },
  },
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,54 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-
-module.exports = {
-  entry: path.join(__dirname, 'src', 'index.js'),
-  mode: 'development',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.?js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
-          },
-        },
-      },
-      {
-        test: /\.css$/i,
-        include: path.resolve(__dirname, 'src'),
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-      },
-      {
-        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'src', 'index.html'),
-    }),
-    //new BundleAnalyzerPlugin(),
-  ],
-  devServer: {
-    historyApiFallback: true,
-    port: 8008,
-  },
-};