Vue-loader: Upgrade vue-loader to webpack 3

Created on 20 Jun 2017 · 6Comments · Source: vuejs/vue-loader

What problem does this feature solve?

With the recent launch of webpack 3, some exciting features was added, including Scope Hoisting. As stated by the team:

"Migrating from webpack 2 to 3, should involve no effort beyond running the upgrade commands in your terminal. We marked this as a Major change because of internal breaking changes that could affect some plugins."

So, I believe the migration will be easy and will give only benefits:

npm install [email protected] --save-dev

Source

ErickPetru

👍5

Most helpful comment

I tried this today, vue loader works just fine with webpack 3, but when
new webpack.optimize.ModuleConcatenationPlugin() is enabled, it prevents webpack from concatenating the modules. Because vue-loader by default converts export statements in vue files to module.exports and ModuleConcatenationPlugin bailsout on these statements.

If you enable --display-optimization-bailout option during build, it clearly says

module is used with non-harmony imports from ./src/App.vue

more details:

[7] ./src/App.vue 998 bytes {4} [built]
[8] ./node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f5e1a3ba","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 41 bytes {4} [built]
[10] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 130 bytes {4} [built]
       ModuleConcatenation (inner): module is used with non-harmony imports from ./src/App.vue
[14] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-f5e1a3ba","preserveWhitespace":false}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue 385 bytes {4} [built]

I've tried setting esModule to true in vue loader config. but that also didn't work.

serkanyersen on 20 Jun 2017

👍3

All 6 comments

If you enable --display-optimization-bailout option during build, it clearly says

module is used with non-harmony imports from ./src/App.vue

more details:

[7] ./src/App.vue 998 bytes {4} [built]
[8] ./node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f5e1a3ba","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 41 bytes {4} [built]
[10] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 130 bytes {4} [built]
       ModuleConcatenation (inner): module is used with non-harmony imports from ./src/App.vue
[14] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-f5e1a3ba","preserveWhitespace":false}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue 385 bytes {4} [built]

I've tried setting esModule to true in vue loader config. but that also didn't work.

serkanyersen on 20 Jun 2017

👍3

@erickpetru I'm not sure what you are asking - here should we update webpack? In this repository?

Or are you simply asking if vue-loader works with webpack 3?

The latter is: yes, but we are currently working on implementing true esmodule exports to reap the benefits of the ModuleConcatenationPlugin - which currently bails on .vue files as @serkanyersen correctly observed.