Moving from Webpack to Rollup in a Vue-based website

Support
, , ,
1

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 }),
    commonjs(),
    scss(),
    isProduction && postcss(),
    json(),
    vue(),
    isProduction &&
      terser({
        module: true
      }),
    !isProduction &&
      serve({
        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!

2

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[].

3

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

4

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.

5

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