Add a watch mode

[zigomir]

What problem does this feature solve?

Sometimes you don't want to serve html and other build files with integrated serve command.

Requirements

watch command option needs to take into account vue.config.js's outputDir or --dest. (I'm guessing this would work out of the box even). I think it's actually same as running webpack-cli with webpack --watch.

Would you be willing to merge a PR that adds this command / command option?

What does the proposed API look like?

vue-cli-service watch

or (preferably)

vue-cli-service build --watch

[yyx990803]

Sure, we can take a PR for build --watch

[gtso86]

This new featured have a side effect: since the hash on filename changes every time, the dist folder starting to have all old versions from the same file

Besides that, is there a way to allow other flag or something to avoid vue-cli-service build --watch add hash in the end of filename? This will helps a lot use this build process when you need run Vue.js apps inside old apps, like my actual scenario: I'm building a Vue app runing inside a legacy app, so my Vue instance is only a div inside a whole old webapp.

[yyx990803]

@gtso86 during development you should use --mode development for faster rebuilds and the files will not have hashes. And we should probably default to dev mode when --watch is used... thoughts @zigomir ?

[zigomir]

Yeah, this makes sense. I'm always using --watch with --mode development and can't think of a good use case when you'd want to have --watch within a production mode.

Edit: Changes are now in see #1430.

[akhansari]

Is there any possibility to activate HMR mode with this command:
vue-cli-service build --watch --mode development.

Like: vue-cli-service build --watch --mode development --hmr

I would like to say that it's primary on not SPA environments.

[yyx990803]

If you are using --watch, the files are written to disk, so it's impossible to have HMR for that.

[akhansari]

Yes, indeed, before I was using the webpack-hot-middleware with my existing server. But with the CLI I don't have this choice anymore.

I'll try to find an alternative solution or to make webpack-hot-middleware work with the CLI.

[meteorlxy]

I met two problems with vue-cli-service build --watch --mode development.

1. Lots of [hash].hot-update.json are being generated:

2. The assets files are not in the sub directory:

dashboard.js is supposed to be put into public/js dir, but it's in public/ now.

---

Here's my vue.config.js:

module.exports = {
  outputDir: 'public',
  
  pages: {
    dashboard: {
      entry: 'client/src/dashboard/app.js',
      template: 'client/public/index.html',
      filename: '../resources/views/dashboard.blade.php',
      chunks: ['chunk-vendors', 'chunk-common', 'dashboard']
    }
  },

  chainWebpack (config) {
    config.resolve
      .alias
        .set('@', path.resolve(__dirname, 'client/src'))
        .end()
  },
}

With version 3.0.3

[anthonylebrun]

I can confirm what @meteorlxy experienced:

vue-cli-service build and vue-cli-service build --watch results in a different dist directory structure.

dashboard.js is supposed to be put into public/js dir, but it's in public/ now.

vue-cli-service build also generated a css folder, whereas it doesn't wit hthe --watch option.

[anthonylebrun]

@meteorlxy I found a workaround, but I'm not 100% sure what the issue is or why it works. Today is my first day using vue-cli or webpack for that matter!

This issue tipped me off: #1617

Setting the NODE_ENV to production changes the output dir structure:

NODE_ENV=production vue-cli-service build --watch --mode development

If anyone would explain what's actually going on, that would be awesome :D

[zigomir]

@anthonylebrun @meteorlxy

1.) running vue-cli-service build --watch runs in development mode by default: reference
2.) about "dashboard.js is supposed to be put into public/js dir, but it's in public/ now": not entirely correct. When you build in development mode @vue/cli won't extract css into separate file and thus sub-directories js and css aren't needed. If you wan't to use production like build, with split directories, you can use vue-cli-service build --watch --mode production. But that will make rebuilds slower due to minification and all.