RFC: beta.10, Upgrading to webpack 4 + vue-loader 15

[yyx990803]

Upcoming Breaking Changes in beta.10

Node version requirement

As Node 8 becomes the latest LTS, vue-cli-service and all official plugins now also require a minimum Node version of 8.

Test plugin script/command rename

• cli-plugin-unit-jest and cli-plugin-unit-mocha now register test:unit command and script instead of test;
• cli-plugin-e2e-cypress now register test:e2e with optional --headless flag instead of "e2e" and
  e2e:open;
• cli-plugin-e2e-nightwatch now registers test:e2e instead of e2e

Plugin commands and mode

PluginAPI.setMode() has been removed. Instead, for a plugin to sepcify the default mode for a registered command, the plugins should expose module.exports.defaultModes in the form of { [commandName]: mode }.

webpack 4 & vue-loader 15

We are planning to upgrade to webpack 4 + vue-loader 15 in beta.10. This will result in some breaking changes:

webpack

• Plugins that are not compatible with webpack 4 will no longer be supported.

• We will using webpack 4's optimization.splitChunks with default automatic strategy instead of current CommonChunksPlugin. If you want to tweak the code splitting behavior you'll need to use webpack 4's new options.

CSS Configuration

• css option will be removed, all CSS-related configurations should be done by tapping into the respective loaders using chainWebpack. See how vue-loader 15 is different from previous versions

• CSS extraction will likely behave a bit differently as we will be moving to mini-css-extract-plugin. More on this as we migrate.

Build

• dll option will be removed. Webpack 4 should provide good enough perf and the cost of maintaining DLL mode inside Vue CLI is no longer justified.

[luckyyyyy]

I'm looking forward to it.
This is very good.

[pranavjindal999]

excited about the new beta..

[Codermar]

Is there an ETA for this beta specifically and for the CLI final release in general?

[LinusBorg]

I propose to include #1248 in beta.10 it's a breaking change since it requires to import the babel polyfill in main.js, but overall ensures a better dev exp.

Could make a PR if we decide so.

[DRoet]

@Codermar FYI beta.10 is out right now

[pranavjindal999]

I was using Vue-CLI 3.0.0-beta.9 and then upgraded to Vue-CLI 3.0.0-beta.10 (including all plugins to 3.0.0-beta.10)

Everything worked fine, except that the Hot Module replacement broke for my project.
(It is working fine if I make a project from scratch using Vue-CLI 3.0.0-beta.10)

Now, when I compare my beta9 and beta10 builds, here is what is happening:

If I change a .vue file (I'm changing a placeholder of a text field in <template>)
For beta9, hot reload works fine and the network tab in my chrome shows following

f38738739fc200ae7163.hot-update.json    200 xhr app.js:56   277B    310 ms	
2.f38738739fc200ae7163.hot-update.js    200 script  app.js:43   7.4KB   10 ms

But with the beta10 the UI does not update though there is something happening in my network tab, and that too twice

f6122e677f76ccde7d62.hot-update.json	200	xhr	     app.js:60    	279 B	485 ms	
app.f6122e677f76ccde7d62.hot-update.js	200	script	app.js:46	14.7 KB	8 ms	
fc2e9a97befa8973fd9e.hot-update.json	  200 xhr	  app.js:60	279 B	53 ms	
app.fc2e9a97befa8973fd9e.hot-update.js	200	script	app.js:46	7.7 KB	6 ms	

This activity in network indicates that HMR is happening but it is not updating the component then and there.
If I route to a different component and come back (without a complete reload), I find the component updated to the latest content.

Can anyone help?
I cannot provide a reproduction link as my project is internal.

[LinusBorg]

I was using Vue-CLI 3.0.0-beta.9 and then upgraded to Vue-CLI 3.0.0-beta.10 (including all plugins to 3.0.0-beta.10)

vs

(It is working fine if I make a project from scratch using Vue-CLI 3.0.0-beta.10)

Did you do the npm version of "turning it on and off again" - deleting /node_modules and running npm install?

[pranavjindal999]

@LinusBorg
Yes I deleted the complete node_modules and did a yarn install .

Well I got the issue what made HMR stop.
In my vue.config.js, I was overriding the eslint config to run eslint with --fix flag with following code:

config.module
      .rule("eslint")
      .use("eslint-loader")
      .tap(options => {
        return merge(options, {
           fix: true
    });
});

Because of this, after the upgrade, the webpack is building my code twice at very small successions and somehow interfering with HMR.
This used to work fine with beta 9.

With, beta 10, if I disable the this fix flag in vue.config.js, HMR works, but I really want that real-time fix rather than commit time fix.

[pranavjindal999]

I got it fixed, my component had en empty style tag that was causing double compilation of code, because of my eslint config and prettier (They were clashing)

<style scoped>
</style>

Removing this fixed HMR.

Thanks everyone for helping though.