Add a build --watch flag that writes to the disk in development

[ghost]

What problem does this feature solve?

I would like to serve the Vue as a SPA app inside of the ASP.NET application. With the existing serve command, I do not have access to the files on the disk, so I cannot accomplish that. With a build --watch flag, it would run the webpack build, watch for file changes, and run the build on file changes.

Ionic supports this (ionic-app-scripts watch), Angular CLI supports this (ng build --watch), and these allow me to write Angular/Ionic apps and use them as part as my web application.

What does the proposed API look like?

vue-cli-service build --watch or vue-cli-service watch.

[dhensche]

A quick workaround, until this feature is possibly added could be to add the following entry to the scripts section of your package.json "watch": "webpack --config ./node_modules/@vue/cli-service/webpack.config.js --watch". Then you can just run yarn watch or npm run watch

[ghost]

Awesome! That seems to work nicely.

[LinusBorg]

You should also be able to have the dev-server write its files to the disk like this:

// vue.config.js
module.exports = {
  devServer: {
    inline: false // https://webpack.js.org/configuration/dev-server/#devserver-inline
  }
}

or maybe you need this: https://github.com/gajus/write-file-webpack-plugin

// vue.config.js
const WritePlugin = require('write-file-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new WritePlugin()
   ]
  }
}

[dhensche]

@LinusBorg The first option didn't seem to do the trick a quick test (not seeing a dist folder be created when I run yarn serve), but that other plugin looks promising

[zwenza]

I started to build a own cli-plugin for exactly this, because our applications are integrated into thymeleaf.

My main problem is that I want to edit the webpack config and then execute the vue-cli-service build plugin. Is there any way that I can trigger a command from my custom command?

The code looks somehow like this currently:

module.exports = (api) => {
    api.registerCommand('build-watch', () => {
        api.configureWebpack(webpackConfig => {
            webpackConfig.watch = true
        });

        // start vue-cli-service build now
    });
};

Or do I miss something which would make it much easier to achieve this goal?

[LinusBorg]

Give this a try:

module.exports = (api) => {
    api.registerCommand('build-watch', (...args) => {
        api.configureWebpack(webpackConfig => {
            webpackConfig.watch = true
        });

       api.service.run('build', ...args)
    });
};

[zwenza]

@LinusBorg works like a charm 😃 thanks! Will post the plugin here once I published it

[zwenza]

There you go https://www.npmjs.com/package/vue-cli-plugin-build-watch

[zigomir]

I think this could be closed with #1332 merged and released. /cc @Akryum

[phillt]

It should be noted that @zwenza's plugin outputs a flattened directory structure than when you run the npm run build command. This is an issue for my particular use case as we reference some chunks inside the JS directory

[WisdomSky]

It should be noted that @zwenza's plugin outputs a flattened directory structure than when you run the npm run build command. This is an issue for my particular use case as we reference some chunks inside the JS directory

True. I tested @zwenza 's code and it flattens the js directory. I am developing a chrome extension and so the manifest.json file has paths pointing to js files in a directory. After building, the manifest is unable to resolve those files because the directory was flattened out.

[WisdomSky]

Okay. So after a little bit of fiddling, you can prevent the flattening of the js directory by specifying the output file name in the vue.config.js:

module.exports = {
    chainWebpack(config) {
            config.output.filename("js/[name].js");
    }
}

And you don't need to install additional plug-ins,

you can just run:

npx vue-cli-service build --watch

or add it into your package.json:

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"watch": "vue-cli-service build --watch",
"dev": "vue-cli-service build --mode development"
},

[Kjir]

I came here through a duckduckgo search and the answer is almost here.
The correct option for the devServer is:

// vue.config.js
module.exports = {
  devServer: {
    writeToDisk: true // https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
  }
}

[ijunaid8989]

But after adding --watch, there's only one file being created..

  ../priv/static/app.js    18391.72 KiB             3172.99 KiB

Images and other types of assets omitted.

And no CSS file is being created!?

[worldtok]

None of the solutions given above seems to compile CSS files on development.

Any workaround for this ?

[axe-me]

@ijunaid8989 try add NODE_ENV=production to your command

"scripts": {
    "serve": "vue-cli-service serve",
    "watch": "NODE_ENV=production vue-cli-service build --watch --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

you can read more here https://cli.vuejs.org/guide/mode-and-env.html#modes

[axe-me]

actually you can just add

css: {
    extract: true
  }

into your vue.config.js

@ijunaid8989

[ccarstens]

@axe-me css: {extract: ...} just saved my life

[richard-howell]

I required a mix of @axe-me and @Kjir suggestions to solve my issue. Notice that writeToDisk is nested in devMiddleware.

// vue.config.js
module.exports = {
  css: {
    extract: true
  },
  devServer: {
    devMiddleware: {
      writeToDisk: true,
    }
  }
}