Vite: How to fail on killing Webpack

Or better yet, this is why you’re still using Webpack

One directory to rule them… one

One of the thing that Vite assumes is the development directory. It thinks that you will use a single HTML page for an Single Page Application, and that all your assets are under a source folder inside that root directory.

project/
├─ node_modules/
├─ public/
├─ css/
│ └─ app.css
├─ js/
│ └─ app.js
├─ .gitignore
├─ index.html
└─ README.md
project/
├─ node_modules/
├─ public/
│ └─ index.html
├─ src/
│ ├─ css/
│ │ └─ app.css
│ └─ js/
│ └─ app.js
├─ .gitignore
└─ README.md

Using a backend is painful

If you’re developing a web application with a real backend, like under React, Symfony, Laravel, or even .NET Core, you are into a world of pain.

<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/main.js"></script>

No configuration either

You may think that the configuration may have some kind of solution to the problems above, but not. The config is relatively simple, but doesn’t change anything from the big drawbacks from above.

import { defineConfig } from 'vite'

export default defineConfig({
root: "src",
publicDir: "../public",
build: {
outDir: "../dist"
}
})

Graphic Designer graduate. Full Stack Web Developer. Retired Tech & Gaming Editor.