Nuxt.js: ✨ Webpack 4 upgrade

[pi0]

Webpack 4 beta just released and no features/breaking-changes planned for final release. The hardest part for the upgrade is plugins that need to adapt to new hooks system. We have about 1 month time remaining to the final release of webpack and (hopefully) until then all of the webpack plugins used by nuxt.js will be compatible with 4.x.

PR: #2901 - Status: Done

Branch: feat/webpack4

Resources

• webpack 4: Release notes
• webpack 4: Legato release annoucenment
• webpack 4: mode and optimization
• webpack 4: migration guide for plugins/loaders
• webpack 4: Code Splitting, chunk graph and the splitChunks optimization
• webpack 4: import() and CommonJs
  
• RIP CommonsChunkPlugin.md

Pending plugins

extract-text-webpack-plugin

Upgrade:

PR: webpack-contrib/extract-text-webpack-plugin#707 - Status: merged

NPM Release: v4.0.0-alpha.0

Problem with ModuleConcatination:

PR: webpack/webpack#6597 - Status: open

Fixed in webpack-contrib/extract-text-webpack-plugin#728

html-webpack-plugin

PR: jantimon/html-webpack-plugin#823 - Status: open

PR: webpack-contrib/html-webpack-plugin/pull/3 - Status: merged

NPM Release: 3.0.6 released!

time-fix-plugin

PR: egoist/time-fix-plugin#1 - Status: merged

_{This feature request is available on Nuxt.js community (#c2335)}

[tonyrewin]

Maybe is a good moment to rethink about plugins system basis. Most of the time I have this in my nuxt.config.js: plugins: [ { src: '~plugins/nossr', ssr: false } ] and just one nossr.js file for all of them. But I did not really check ssr-ok-plugins.

[pschaub]

Webpack 4 is released now. Let's upgrade!

[pi0]

@pSchaub We are on it ;)

[clarkdo]

@pi0
ModuleConcatination issue has been fixed in https://github.com/webpack-contrib/extract-text-webpack-plugin/pull/728

[ekoeryanto]

it is already shipped on latest version?

[pi0]

Only nuxt-edge. Will be shipped with nuxt 2

[ekoeryanto]

@pi0 thanks, I tried and only vendor is deprecated there. but, there is any documentation to use the nuxt-edge?

[pi0]

https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67

[ekoeryanto]

thanks, migrating now.

[ekoeryanto]

compiler.hooks.compilation.tap('NetlifyServerPushPlugin', compilation => {
      compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tap(
        'NetlifyServerPushPlugin',
        data => {
          const assets = data.assets;
          const source = this.generateAssetHeaders(assets);
          compilation.assets[`${this.options.headersFile}`] = {
            source: () => source,
            size: () => source.length,
          };
        }
      );
    });
}

i have a problem, htmlWebpackPluginBeforeHtmlGeneration is not exists on webpack. implementing above code not working on nuxt-edge

[clarkdo]

@ekoeryanto
How about to use compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync

https://github.com/jantimon/html-webpack-plugin/issues/871#issuecomment-369585543

[ekoeryanto]

same error with htmlWebpackPluginBeforeHtmlProcessing
and in console.log(compilation.hooks) there is no htmlWebpackPlugin* exists

[clarkdo]

Did you install html-webpack-plugin in your own package.json and which version are you using?

htmlWebpackPluginBeforeHtmlProcessing was introduced since 3.0.0 https://github.com/jantimon/html-webpack-plugin/blob/v3.0.0/index.js#L58

[ekoeryanto]

no, I did not install html-webpack-plugin my self as it is already covered by nuxt

[clarkdo]

@ekoeryanto Can you please provide a repo to reproduce you issue?

[ekoeryanto]

@clarkdo here https://github.com/pakeweb/apek/tree/develop
I commented out plugin section in nuxt.config.js

[clarkdo]

@ekoeryanto
Sorry for the late reply, I'm kind of busy with my personal stuff recent days.
Could you please open an issue and cc to me in case that I won't forget it.

[ekoeryanto]

done #3254

[david-j-davis]

On the Nuxt website it says version 2.0, but build vendor is still on the site, a bit misleading isn't it? https://nuxtjs.org/api/configuration-build/#vendor. Well now that I am using [email protected], I have removed vendor, but unfortunately I do not know where I am to place my local vendor js so it builds on my page. I suggest the documentation say that vendor is deprecated with a suggestion on what to use instead.

[manniL]

@david-j-davis Thanks for the suggestion!

You can control you chunks now fine-grained with webpack 4 and splitChunks (docs for this plugin).

By default, several common dependencies are bundled source code.

[david-j-davis]

Thanks @manniL, I'll look into it, and do we need to install the webpack package as well or is that bundled already in nuxt?

[manniL]

@david-j-davis No, you don't need to install that package. It already comes (with a decent configuration for most use cases) with Nuxt 2 ☺️ )

[david-j-davis]

Ok thanks @manniL !

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.