Migration from Webpack Encore

Install

WebpackEncoreBundle is linked with a Symfony Recipe. Before removing this bundle, backup your assets content and package.json/package-lock.json in another location. They will be deleted when you remove the bundle.

mv assets assets.bak
mv package.json package.json.bak
mv package-lock.json package-lock.json.bak
composer remove symfony/webpack-encore-bundle

You can safely rename your backup and install the Vite Bundle.

mv assets.bak assets
mv package.json.bak package.json
mv package-lock.json.bak package-lock.json
composer require pentatrion/vite-bundle

You need to remove Webpack dependencies

npm rm @symfony/webpack-encore webpack webpack-cli webpack-notifier

# you probably won't need those dependencies either
npm rm @babel/core @babel/preset-env core-js regenerator-runtime

Check the package.json of the Webpack Encore Bundle recipe to check which dependencies are no longer needed.

You must then manually add the vite and vite-plugin-symfony dev dependencies and scripts in your existent package.json. Check the package.json reference file.

Continue your configuration following the installation page.

Configuration

There are some minor differences with the Twig functions

// webpack.config.js
-Encore.addEntry("app", "./assets/app.js");

// vite.config.js
+export default {
+    // ...
+    plugins: [
+      symfonyPlugin()
+    ],
+    build: {
+        rollupOptions: {
+            input: {
+                app: "./assets/app.js"
+            },
+        },
+    },
+};

{% block stylesheets %}
-    {{ encore_entry_link_tags('app') }}
+    {{ vite_entry_link_tags("app") }}
{% endblock %}

{% block javascripts %}
-    {{ encore_entry_script_tags('app') }}
+    {{ vite_entry_script_tags("app") }}
{% endblock %}