Vite might be fasterbut is not one tool for everything and it can be difficult to make it work with Wordpress
Being influenced by a work colleague to try Vite and because I know how much time I spent many times setting up Webpack especially when it was a major update I decided to give some time to setup Vite for a Wordpress theme.
The easy step of installing Vite
First of all I had to install Vite and it was straightforward.
Then I wanted to make it work with a custom local domain with HMR (Hot Module Replacement) and apparently, by setting up the server host it should work just by doing that
server: { host: 'customdomain.local' },but I ended by never being able to see for real if is really working because Vite is not meant to work with php files as an entry point.
The difficulty I got into by using Vite
I spent some time to research for a solution and I found a npm package vite-plugin-php that is suppose to save my day.
I installed it, imported in my vite.config.js file as
import usePHP from 'vite-plugin-php';and used it as
plugins: [
usePHP({
entry: ['./posts/**/*.php', './articles/**/*.php', './*.php'],
rewriteUrl(requestUrl) {
requestUrl.pathname = '' + requestUrl.pathname;
return requestUrl;
},
}),
]but it still didn't work.
I also found that it might help to add index.php as an entry point in the build input option
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "/index.php"),
},
},
},but this also didn't solved the problem.
After spending many hours trying things I came to a conclusion that is no point is spending more time to setup Wordpress with Vite for the moment.
Maybe is too early and in a few months or years someone will come with a solution for this problem.
My intention is too stick to blogging and improve the look of my website, not to spend hours or days for finding something that does not exist for the moment.
For the moment I will stick to Webpack and even GULP. Both proved stable and they both work with php, browser reload (GULP is using BrowserSync and webpack devServer) and for both I can confirm that they can automatically refresh a local custom domain.
General conclusion
As with any new technology I consider that a time of a few years is needed until its getting to a certain maturity. For this to happen means that some top level technicians needs to get involved. People to find ways of doing things with that new technology and post solutions on the internet.
Is taking time to prove that a new trend is a solution to existing problems or not.
New technologies can also die. Sometimes they die and be never used again.
Sometimes they reborn in major upgrades that are basically completely new products only that they succeed a name and inherit some of the followers of that previous version.
The owner of a technology can have the ability to predict if a technology is not successful by looking at the issues raised by the people using it and understanding the difficulty of solving them.
When a number of issues are to difficult to solve with the actual build of a new technology a new major upgrade can take its place and a new cycle of try/discover/find solution will begin.
Not all web developers have the time or the motivation to invent or adapt new things to make them work with everything especially when the wheel has been already invented and working technologies already exist.
A late update: I managed to have Vite working on a Wordpress theme, with TypeScript and Sass
If I do the maths for the time I spent these days trying to make Vite work with Wordpress and the time Vite is assuming I can save with every code compilation, I can say that I lost a lot of time already by using Vite.