Moving from Webpack to Rollup in a Vue-based website

I recently started investigating Rollup, and I liked what I’ve seen, so now I want to move from Webpack
Except, I can’t figure out how to get Rollup to work with netlify dev
My rollup.config.js:

import vue from "rollup-plugin-vue2";
import { terser } from "rollup-plugin-terser";
import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import scss from "rollup-plugin-scss";
import postcss from "rollup-plugin-postcss";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import json from "@rollup/plugin-json";

const isProduction = !process.env.ROLLUP_WATCH;

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "esm",
    name: "app"
  plugins: [
    nodeResolve({ browser: true }),
    isProduction && postcss(),
    isProduction &&
        module: true
    !isProduction &&
        contentBase: "dist",
        historyApiFallback: true,
        port: 8080
    !isProduction && livereload("dist")
  watch: {
    clearScreen: true

With this configuration, running netlify dev will indeed result in Rollup building the site, starting from main.js
Then, localhost:8888 will open in a new tab, the site will successfully load, yet Functions won’t work (calls return 500 error codes)

Thank you for helping!

Personally, I will run Netlify dev in a different terminal pane, this way I have one pane for Rollup and the other for Netlify dev server. You can leverage npm-run-all if you really want to execute concurrently.

PS: Good choice in leaving webpack, Rollup is dope, it’s a much faster and more superior bundler for JavaScript. Also, just a FYI, you should run terser at output via output.plugins[].

Unfortunately, I ended up abandoning the idea, so again, I’m stuck to Webpack
The reason is that Vue comes preconfigured to run with Webpack, and I don’t really know which Rollup plugins will give me the equivalent result
For example, I also use Vuetify, in which case I only need to define it in vue.config.js as a plugin and Webpack will take good care of it

hey there, i marked your last post as the “solution” to the original problem even though it wasn’t your preferred choice. If you need more assistance please post again.

It doesn’t make sense to mark as a solution if it’s not a solution