feat: switched bundlers to vite

This commit is contained in:
2022-04-09 23:28:49 +01:00
parent efa90917be
commit cb05338a3f
14 changed files with 1827 additions and 1394 deletions

View File

@ -8,5 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body> </body>
</html> </html>

3125
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,27 +5,18 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "webpack serve", "start": "webpack serve",
"build": "webpack --mode production" "dev": "vite",
"build": "vite build",
"preview": "vite preview"
}, },
"keywords": [], "keywords": [],
"author": "John Costa", "author": "John Costa",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.16.5", "@vitejs/plugin-react": "^1.3.0",
"@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",
"postcss": "^8.4.5", "postcss": "^8.4.5",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.0.1",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2", "tailwindcss": "^3.0.2",
"webpack": "^5.65.0", "vite": "^2.9.1"
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}, },
"dependencies": { "dependencies": {
"clsx": "^1.1.1", "clsx": "^1.1.1",

View File

@ -1,3 +1,6 @@
module.exports = { module.exports = {
plugins: ['postcss-preset-env', require('tailwindcss'), require('autoprefixer')], plugins: {
tailwindcss: {},
autoprefixer: {},
},
}; };

View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
content: ['./src/**/*.{js, jsx}'], content: ['./components/**/*.{html,js,jsx}', './public/index.html', './src/**/*.{html,js,jsx}'],
theme: { theme: {
extend: { extend: {
colors: { colors: {
@ -29,7 +29,7 @@ module.exports = {
}, },
}, },
fontFamily: { fontFamily: {
display: ['Calibre'], display: ['Inter'],
}, },
}, },
}, },

13
vite.config.js Normal file
View File

@ -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'),
},
},
});

View File

@ -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,
},
};