Webpack 4 #1280

adam-lynch · 2018-01-30T16:40:04Z

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 · 2018-01-30T17:33:49Z

for quick reference, the changelogs:

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 · 2018-02-25T08:26:08Z

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

CharlesKumar · 2018-02-26T15:12:19Z

Compelling reason for upgrading

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

Things to consider

webpack-cli is separated
webpack 4 has newer plugin system (current webpack 3 plugin system deprecated)
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()

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 · 2018-02-26T21:34:45Z

Not a smooth upgrade with Webpack 4 particular extract-text-webpack-plugin
webpack-contrib/extract-text-webpack-plugin#727

CharlesKumar · 2018-02-27T02:40:41Z

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 · 2018-03-01T02:16:12Z

Waiting for something new...

aozora · 2018-03-10T07:47:23Z

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

joaoeudes7 · 2018-03-12T00:46:33Z

Webpack Stable!

dak · 2018-03-19T12:51:17Z

Would it make sense to switch to mini-css-extract-plugin in place of extract-text-plugin? See: webpack-contrib/extract-text-webpack-plugin#749

jjyyxx · 2018-03-21T05:11:03Z

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 · 2018-03-21T17:49:14Z

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

jjyyxx · 2018-03-22T01:06:49Z

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 · 2018-03-22T11:35:07Z

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 · 2018-03-22T12:48:29Z

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

I removed the ETWP code from build/utils.js completely (I faced similar problems as @jjyyxx)
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
            }
        }
    }
}

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.

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 · 2018-03-22T13:41:11Z

@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 · 2018-03-22T14:16:17Z

@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 · 2018-03-22T15:15:44Z

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 · 2018-03-22T16:07:26Z

@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 - webpack/webpack#6568 (comment), but it didn't work for me.

dak · 2018-03-22T19:17:20Z

@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 · 2018-03-23T00:58:48Z

@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 · 2018-03-29T07:21:04Z

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 · 2018-03-29T07:47:31Z

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

luckyyyyy · 2018-04-07T19:27:10Z

I recommend to wait for vue-loader 15

MartinX3 · 2018-04-20T09:05:20Z

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

dakshshah96 · 2018-04-24T20:48:28Z

vue-loader v15.0.0 is out now 🚀

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

dakshshah96 · 2018-04-24T20:49:58Z

@LinusBorg Any updates on this?

ChadTaljaardt · 2018-04-25T07:20:59Z

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

MartinX3 · 2018-04-27T08:56:38Z

Also we should wait for vue-cli v3

jzs11 · 2018-04-27T09:19:34Z

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

ChadTaljaardt · 2018-04-27T09:30:03Z

@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 · 2018-04-28T17:41:34Z

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: #1369 (comment).

Update: the build is no longer failing. Yay.

jjyyxx · 2018-05-02T06:12:32Z

vuejs/vue-cli#1205
vue-cli is currently at beta.9. So the official template may come out soon.

troy351 · 2018-05-11T06:30:46Z

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

ChadTaljaardt · 2018-06-04T13:18:00Z

@LinusBorg The PR for this seems to be ready. Would you be able to review it?
#1369

sucrete · 2018-07-06T20:53:41Z

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

I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369

LinusBorg added the discussion label Feb 5, 2018

arielsalminen mentioned this issue Apr 1, 2018

Upgrage to Webpack 4 arielsalminen/vue-design-system#50

Closed

rothsandro mentioned this issue Apr 2, 2018

Error cannot read property compile of undefined vue-styleguidist/vue-styleguidist#111

Closed

ChadTaljaardt mentioned this issue Apr 25, 2018

Update to vue-loader v15? #1367

Closed

noamkfir mentioned this issue Apr 27, 2018

webpack 4, vue-loader 15, et al #1369

Open

PanJiaChen mentioned this issue Apr 28, 2018

Any plans to support webpack4? PanJiaChen/vue-element-admin#630

Closed

ChadTaljaardt mentioned this issue May 3, 2018

Webpack 4 ? #1373

Closed

ChadTaljaardt mentioned this issue May 10, 2018

Update vue-loader to v15 #1378

Open

ChadTaljaardt mentioned this issue May 29, 2018

Webpack 4? #1391

Open

marienfressinaud added a commit to lessy-community/lessy that referenced this issue May 5, 2019

tec: Upgrade to Webpack 4

0fe6f3a

I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369

marienfressinaud mentioned this issue May 5, 2019

tec: Upgrade to Webpack 4 lessy-community/lessy#360

Merged

7 tasks

marienfressinaud added a commit to lessy-community/lessy that referenced this issue May 5, 2019

tec: Upgrade to Webpack 4

9e00187

I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369

Webpack 4 #1280

Webpack 4 #1280

Comments

adam-lynch commented Jan 30, 2018

michaelgallaghertw commented Jan 30, 2018

KaelWD commented Feb 25, 2018

CharlesKumar commented Feb 26, 2018

jzs11 commented Feb 26, 2018

CharlesKumar commented Feb 27, 2018

yoyo837 commented Mar 1, 2018

aozora commented Mar 10, 2018

joaoeudes7 commented Mar 12, 2018

dak commented Mar 19, 2018 • edited Loading

jjyyxx commented Mar 21, 2018

smiller171 commented Mar 21, 2018 • edited Loading

jjyyxx commented Mar 22, 2018

jjyyxx commented Mar 22, 2018

dak commented Mar 22, 2018 • edited Loading

jjyyxx commented Mar 22, 2018

dak commented Mar 22, 2018 • edited Loading

jjyyxx commented Mar 22, 2018 • edited Loading

kinsomicrote commented Mar 22, 2018

dak commented Mar 22, 2018

jjyyxx commented Mar 23, 2018

jinwyp commented Mar 29, 2018 • edited Loading

jzs11 commented Mar 29, 2018

luckyyyyy commented Apr 7, 2018

MartinX3 commented Apr 20, 2018

dakshshah96 commented Apr 24, 2018 • edited Loading

dakshshah96 commented Apr 24, 2018

ChadTaljaardt commented Apr 25, 2018

MartinX3 commented Apr 27, 2018

jzs11 commented Apr 27, 2018

ChadTaljaardt commented Apr 27, 2018

noamkfir commented Apr 28, 2018 • edited Loading

jjyyxx commented May 2, 2018

troy351 commented May 11, 2018

ChadTaljaardt commented Jun 4, 2018

sucrete commented Jul 6, 2018

dak commented Mar 19, 2018 •

edited

Loading

smiller171 commented Mar 21, 2018 •

edited

Loading

dak commented Mar 22, 2018 •

edited

Loading

dak commented Mar 22, 2018 •

edited

Loading

jjyyxx commented Mar 22, 2018 •

edited

Loading

jinwyp commented Mar 29, 2018 •

edited

Loading

dakshshah96 commented Apr 24, 2018 •

edited

Loading

noamkfir commented Apr 28, 2018 •

edited

Loading