Programmatic api for vue-cli-service build/serve that accepts custom webpack config

[nklayman]

What problem does this feature solve?

For a new version of vue-cli-plugin-electron-builder I need to be able to modify the webpack config only if my build command is called, not for the regular build. I need to customize the config to work with electron, but then it won't work in browser. Being able to api.build(config) is necessary for my plugin. api.serve(config) is not necessary, but would be quite nice. I could possibly add this myself and submit a PR, but I want to make sure this is wanted as a feature.

This kinda relates to this comment.

What does the proposed API look like?

Some other features I would like:

• events for recompiling on serve command
• being able to get info such as hosted port, compile errors, and other info like that provided by webpack()
• bundle data is still shown in UI page

essentially a api similar to that of webpack(), but that includes the extra steps of vue-cli-service build/serve (because webpack(api.resolveWebpackConfig()) throws errors).

[yyx990803]

You can customize the config by doing:

const config = api.resolveChainableWebpackConfig()

// apply config changes via chaining

const finalConfig = config.toConfig()

// apply raw modifications if necessary

const compiler = webpack(finalConfig)

For recompiling events you can do so by injecting a custom webpack plugin.

There are a number of things of the current build command that is specific to web targets, so you will have to use the lower level APIs to implement your platform specific build command.

[nklayman]

If I do that I get a bunch of errors. The build by vue-cli includes some extra steps that prevent theses errors from happening.

[yyx990803]

I think you will have to better explain the exact API you need. It's pretty vague right now.

[nklayman]

I created a pr for the build command. The api.service.run('serve') works just fine for this plugin.

[LinusBorg]

Closing as Author closed his own PR.

[m4heshd]

@nklayman is there any way I can invoke serve and launch an Electron instance after dev server starts without writing any complicated Vue plugin level stuff? I've read through your source but still can't figure out. Even posted a question here.

[nklayman]

@m4heshd See my comment on StackOverflow

[m4heshd]

@nklayman thank you for taking time to look through my issue. I actually went through the vue-cli source and ended up doing this which exactly does what I need to.

const vueService = require('@vue/cli-service');
const {info, done, error} = require('@vue/cli-shared-utils');
const service = new vueService(process.cwd());

service.init("development");
service.run('serve').then(({server, url}) => {
    info('Launching Electron...');

    let electron = spawn(path.join('node_modules', '.bin', process.platform === 'win32' ? 'electron.cmd' : 'electron'), ['electron-main.js'], {stdio: 'inherit'});

    electron.on('exit', function (code) {
        process.exit();
    });
})

I wish this stuff were documented. I loved your plugin but after few weeks I just got extremely frustrated, mostly with webpack and completely gave up on the project I was working on to do more research. Went down this rabbit hole of research and ended up creating my own simplistic, fast & effective boilerplate for Vue + Electron now I'm super comfortable with 😊. Your plugin and the community around it really helped me with understanding most of Vue internals and I'm really grateful for that.