Webpack: Webpack 4

[adam-lynch]

Hey, Webpack 4 will be released soon. I'm creating this issue to track when this template is updated so I can update my projects. And I'm particularly interesting in how #1022 will be affected (or not).

[michaelgallaghertw]

for quick reference, the changelogs:

• https://github.com/webpack/webpack/releases/tag/v3.0.0
• https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0

In theory there are no backwards compatibility breaks for v3. Points to watch out for from v4:

• CommonsChunkPlugin was removed -> optimization.splitChunks
• import() always returns a namespace object. CommonJS modules are wrapped into the default export
  
  
  
  • I'd expect some fallout from this, possibly within the inject-loader
  
  

[KaelWD]

It's out now: https://github.com/webpack/webpack/releases/tag/v4.0.0

[CharlesKumar]

Compelling reason for upgrading

1. Better Defaults — #0CJS (Zero configuration - no need for a webpack config file)
2. webpack takes care of dead code elimination (previously done by uglifyjs)
3. huge performance/bundle size improvement over webpack 3.

Things to consider

1. webpack-cli is separated
2. webpack 4 has newer plugin system (current webpack 3 plugin system deprecated)
3. changes in common js importing

Syntax

import() always returns a namespace object. CommonJS modules are wrapped into the default export
    This probably breaks your code, if you used to import CommonJs with import()

1. changes in module type support (auto, esm, json, webassembly)

Defaults

webpack now looks for the .wasm, .mjs, .js and .json extensions in this order

nodejs 4 support is dropped (expected)

a fork of vuejs-templates/webpack for webpack 4 (until everyone realizes webpack 4 has huge benefits over webpack 3)

[jzs11]

Not a smooth upgrade with Webpack 4 particular extract-text-webpack-plugin
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/727

[CharlesKumar]

As I mentioned, webpack 4 has new plugin system

The extract-text-plugin is currently in alpha version (there's no stable release for webpack 4 yet)

plugins are required to rewriiten with webpack 4 compatible API

plugin users have to keep an eye on releases and issues for smooth update (wait for the right time)

[yoyo837]

Waiting for something new...

[aozora]

extract-text-plugin is in beta now, and seems almost stable...

[joaoeudes7]

Webpack Stable!

[dak]

Would it make sense to switch to mini-css-extract-plugin in place of extract-text-plugin? See: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/749

[jjyyxx]

It seems the maintainer of ETWP decided to deprecate this plugin on webpack >= v4.0.0 and recommend mini-css-extract-plugin instead. Many issues related to ETWP 4 (with prefix 4.0.0-beta.0) is closed with that notification. Maybe we should consider mini-css-extract-plugin?

[smiller171]

@jjyyxx @dak Do you know what would be involved in replacing extract-text-plugin with mini-css-extract-plugin?

[jjyyxx]

The mini-css-extract-plugin, from my perspective, is quite simple with only two options filename and chunkFilename. As the maintainer of ETWP claims, if you only use ETWP to extract css, migration should be very simple. I didn't have time to try the migration out, but I believe it would not be tricky if this template uses ETWP to extract css only.

[jjyyxx]

I just tried updating all the deps to webpack 4 compatible version, and altered the config a bit but UNFORTUNATELY faced with numerous errors :-(

The previous build/utils.js calling ExtractTextPlugin.extract is a tricky part to me. I doesn't have sufficient knowledge on how the function works and simply copied related code from ExtractTextPlugin.extract, together with other related code and made a few necessary changes such as changing ExtractTextPlugin.loader to MiniCssExtractPlugin.loader. Eventually, the code could begin to work but reporting Module build failed: ReferenceError: document is not defined with every css file in my project.

A typical stacktrace:

Module build failed: ReferenceError: document is not defined
    at addStylesClient_addStyle (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:329:22)
    at addStylesClient_addStylesToDom (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:313:20)
    at addStylesClient_addStylesClient (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:267:3)
    at Object.SOZN (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:169:14)
    at __webpack_require__ (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:21:30)
    at module.exports.I1BE.module.exports.list (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:70:18)
    at Object.<anonymous> (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\vue-style-loader\index.js!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\css-loader\index.js??ref--10-2!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\postcss-loader\lib\index.js??ref--10-3!E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\element-ui\lib\theme-chalk\display.css:73:10)
    at Module._compile (module.js:649:30)
    at exec (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\mini-css-extract-plugin\dist\loader.js:54:10)
    at childCompiler.runAsChild (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\mini-css-extract-plugin\dist\loader.js:132:14)
    at compile (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\webpack\lib\Compiler.js:238:11)
    at hooks.afterCompile.callAsync.err (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\webpack\lib\Compiler.js:486:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\Hook.js:35:21)
    at compilation.seal.err (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\webpack\lib\Compiler.js:483:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\webpack\lib\Compilation.js:957:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\webpack\lib\Compilation.js:948:32)
    at _err2 (eval at create (E:\Desktop\QY Project\QingyunMusicPlayer-JS\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:20:1)
 @ ./src/main.js

I think I must make sth wrong, so I hope someone familiar with webpack, ETWP, mini-css-extract-plugin or anything related to text extraction could come to help.

[dak]

I replaced ETWP with Mini-CSS-Extract-Plugin with fairly minimal changes.

1. I removed the ETWP code from build/utils.js completely (I faced similar problems as @jjyyxx)
2. I added optimization config to webpack.base.conf.js:

optimization: {
    minimize: false,
    runtimeChunk: {
        name: 'vendor'
    },
    splitChunks: {
        cacheGroups: {
            default: false,
            commons: {
                test: /node_modules/,
                name: "vendor",
                chunks: "initial",
                minSize: 1
            }
        }
    }
}

1. I replaced ExtractTextPlugin with MiniCSSExtractPlugin in webpack.prod.conf.js:

const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); // import

// added optimization.minimize: true to settings
optimization: {
    minimize: true
}

// changed `new ExtractTextPlugin({` to `new MiniCSSExtractPlugin({` with the exact same param `{filename: utils.assetsPath('css/[name].[contenthash].css')}` passed as an argument.

1. Removed all CommonsChunkPlugin code.

I have changed the build process in my project quite a bit since I used this template, so there may be some differences. I also was seeing two deprecation warnings that I wasn't able to track down, but didn't seem to have any detrimental effect:

(node:37161) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:37161) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

Hopefully this helps.

Edit: I also added mode: 'development' (and cache: true) to the webpack.dev.conf.js file to re-enable incremental compilation and mode: 'production' to webpack.prod.conf.js.

[jjyyxx]

@dak That's nice work.

I removed the ETWP code from build/utils.js completely (I faced similar problems as @jjyyxx)

Comment these code out leads to other errors as

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  file: 'E:\\Desktop\\QY Project\\QingyunMusicPlayer-JS\\src\\components\\TmDocContainer.vue',
  source: 'exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);\n// imports\n\n\n// module\nexports.push([module.id, "\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\r\\n.tm {\\r\\n  display: block;\\r\\n  background-color: black;\\r\\n  padding: 10px;\\r\\n}\\r\\n", ""]);\n\n// exports\n',
  line: 1,
  column: 1,
  message: 'E:\\Desktop\\QY Project\\QingyunMusicPlayer-JS\\src\\components\\TmDocContainer.vue:1:1: Unknown word',
  input:
   { line: 1,
     column: 1,
     source: 'exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);\n// imports\n\n\n// module\nexports.push([module.id, "\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\r\\n.tm {\\r\\n  display: block;\\r\\n  background-color: black;\\r\\n  padding: 10px;\\r\\n}\\r\\n", ""]);\n\n// exports\n',
     file: 'E:\\Desktop\\QY Project\\QingyunMusicPlayer-JS\\src\\components\\TmDocContainer.vue' } }

Did I miss sth?

[dak]

@jjyyxx I set it to always return with the vue-style-loader:

function generateLoaders(loader, loaderOptions) {
    const loaders = [cssLoader];

    if (loader) {
        loaders.push({
            loader: `${loader}-loader`,
            options: {
                ...loaderOptions,
                sourceMap: options.sourceMap
            }
        });
    }

    return ['vue-style-loader'].concat(loaders);
}

It looks like in the code you showed, if options.extract is true, nothing is returned, which doesn't seem to be what you want.

[jjyyxx]

So currently CSS has to be bundled within the JS files?

In addition, updating other devDeps to newest version, I did not see the DeprecationWarning.

[kinsomicrote]

@dak Thanks for sharing how you fixed it.
I'm also having same warnings. I'm not sure what the cause is. I've tried to trace it using by following the steps mentioned here - https://github.com/webpack/webpack/issues/6568#issuecomment-374871753, but it didn't work for me.

[dak]

@jjyyxx I wasn't a huge fan of that either, but it wasn't worth it to me to figure out the fix (especially for my usecase, where a single version of an application is being installed in isolation, so I get little benefit out of caching files separately). I'm not even sure there is a good solution (yet).

@kinsomicrote I believe the errors are coming from the plugins being used. Apparently WebPack 4 is backwards compatible with WebPack 3 plugins, which are where the deprecation warnings are coming from. I saw html-webpack-plugin fixed an issue with that exact deprecation warning in I believe 3.0.6, although I imagine it will take some time for all the plugins used to be fully updated for WebPack 4.

[jjyyxx]

@dak Thanks for your help. It currently works. However, without extracting css leads to no minification (remove comments, etc) of the css declarations, increasing my bundle size by 500kb.
My case might be special but I think extraction is necessary for part of the users. Maybe someone could solve this.

[jinwyp]

Hi all:
I have a full demo for webpack 4 vue project , with extracting css and splitChunks. support multipage and entries. pls check , https://github.com/jinwyp/koa-user/blob/master/frontend-vue/src/config/webpack.base.conf.js

Output file size:

I would say it need a bit work to upgrade to webpack4.

[jzs11]

I recommend to wait for vue-loader 15 - https://github.com/vuejs/vue-loader/tree/next, to have native support.

[luckyyyyy]

I recommend to wait for vue-loader 15

[MartinX3]

I recommend to wait for vue-loader 15 to have native support.

[dakshshah96]

vue-loader v15.0.0 is out now 🚀

https://github.com/vuejs/vue-loader/releases

[dakshshah96]

@LinusBorg Any updates on this?

[ChadTaljaardt]

@dakshshah96 Vue loader 15 only recently got released, it will most likely take a while to implement it still.

[MartinX3]

Also we should wait for vue-cli v3

[jzs11]

vue-loader works great for me. Vue-loader docs and migration guide are very helpful.

[ChadTaljaardt]

@jingzheshan I haven't looked at the implementation details regarding this but it might be useful to set up a demo repository for reference for everyone else?

[noamkfir]

The build for my PR (#1369) is failing. I have a pretty good idea why, and I'd appreciate it if anybody familiar with CircleCI or permissions to manage the official build on CircleCI could take a quick look.

The details are here: https://github.com/vuejs-templates/webpack/pull/1369#issuecomment-385192951.

Update: the build is no longer failing. Yay.

[jjyyxx]

https://github.com/vuejs/vue-cli/issues/1205
vue-cli is currently at beta.9. So the official template may come out soon.

[troy351]

vue-cli beta.10 just released a few hours ago which upgraded to webpack 4

[ChadTaljaardt]

@LinusBorg The PR for this seems to be ready. Would you be able to review it?
https://github.com/vuejs-templates/webpack/pull/1369

[sucrete]

@dak your walkthrough really helped me out. thank you!