feat: upgrade to vue-loader 15

BREAKING CHANGE: the "vueLoader" option has been removed. To modify vue-loader
options, use chainWebpack then `config.module.rule(vue).use(vue-loader).tap()`.
vue-loader has been upgraded to v15 and expects different options from v14.

packages/@vue/cli-plugin-babel/index.js

@@ -42,27 +42,5 @@ module.exports = (api, {
  jsRule
  .use('babel-loader')
  .loader('babel-loader')
-
- webpackConfig.module
- .rule('vue')
- .use('vue-loader')
- .tap(options => {
- options.loaders = options.loaders || {}
- options.loaders.js = [
- {
- loader: 'cache-loader',
- options: { cacheDirectory }
- }
- ]
- if (useThreads) {
- options.loaders.js.push({
- loader: 'thread-loader'
- })
- }
- options.loaders.js.push({
- loader: 'babel-loader'
- })
- return options
- })
  })
 }

packages/@vue/cli-plugin-eslint/index.js

@@ -7,6 +7,7 @@ module.exports = (api, { lintOnSave }) => {
  .pre()
  .exclude
  .add(/node_modules/)
+ .add(require('path').dirname(require.resolve('@vue/cli-service')))
  .end()
  .test(/\.(vue|(j|t)sx?)$/)
  .use('eslint-loader')

packages/@vue/cli-plugin-typescript/index.js

@@ -16,42 +16,13 @@ module.exports = (api, {
  .extensions
  .merge(['.ts', '.tsx'])
 
- const tsRule = config.module
- .rule('ts')
- .test(/\.tsx?$/)
-
- const vueLoader = config.module
- .rule('vue')
- .use('vue-loader')
+ const tsRule = config.module.rule('ts').test(/\.ts$/)
+ const tsxRule = config.module.rule('tsx').test(/\.tsx$/)
 
  // add a loader to both *.ts & vue<lang="ts">
- const addLoader = loader => {
- const use = tsRule
- .use(loader.loader)
- .loader(loader.loader)
- if (loader.options) {
- use.options(loader.options)
- }
- vueLoader.tap(options => {
- options.loaders = options.loaders || {}
- options.loaders.ts = options.loaders.ts || []
- options.loaders.ts.push(loader)
- options.loaders.tsx = options.loaders.tsx || []
- if (loader.loader === 'ts-loader') {
- // for TSX need to append tsx suffix
- options.loaders.tsx.push({
- loader: 'ts-loader',
- options: {
- transpileOnly: true,
- appendTsxSuffixTo: [/\.vue$/],
- happyPackMode: useThreads
- }
- })
- } else {
- options.loaders.tsx.push(loader)
- }
- return options
- })
+ const addLoader = ({ loader, options }) => {
+ tsRule.use(loader).loader(loader).options(options)
+ tsxRule.use(loader).loader(loader).options(options)
  }
 
  addLoader({
@@ -79,6 +50,12 @@ module.exports = (api, {
  happyPackMode: useThreads
  }
  })
+ // make sure to append TSX suffix
+ tsxRule.use('ts-loader').loader('ts-loader').tap(options => {
+ delete options.appendTsSuffixTo
+ options.appendTsxSuffixTo = [/\.vue$/]
+ return options
+ })
  } else {
  // Experimental: compile TS with babel so that it can leverage
  // preset-env for auto-detected polyfills based on browserslists config.

packages/@vue/cli-service-global/lib/globalConfigPlugin.js

@@ -60,15 +60,6 @@ module.exports = function createConfigPlugin (context, entry, asLib) {
  presets: [require.resolve('@vue/babel-preset-app')]
  }
 
- // set inline vue-loader options
- config.module
- .rule('vue')
- .use('vue-loader')
- .tap(options => {
- options.loaders.js[1].options = babelOptions
- return options
- })
-
  // set inline babel options
  config.module
  .rule('js')

packages/@vue/cli-service/__tests__/css.spec.js

@@ -22,12 +22,14 @@ const genConfig = (pkg = {}, env) => {
 }
 
 const findRule = (config, lang) => config.module.rules.find(rule => {
- const test = rule.test.toString().replace(/\\/g, '')
- return test.indexOf(`${lang}$`) > -1
+ return rule.test.test(`.${lang}`)
 })
 
 const findLoaders = (config, lang) => {
  const rule = findRule(config, lang)
+ if (!rule) {
+ throw new Error(`rule not found for ${lang}`)
+ }
  return rule.use.map(({ loader }) => loader.replace(/-loader$/, ''))
 }
 
@@ -37,49 +39,21 @@ const findOptions = (config, lang, _loader) => {
  return use.options
 }
 
-const findUsesForVue = (config, lang) => {
- const vueOptions = findOptions(config, 'vue', 'vue')
- return vueOptions.loaders[lang]
-}
-
-const findLoadersForVue = (config, lang) => {
- return findUsesForVue(config, lang).map(({ loader }) => loader.replace(/-loader$/, ''))
-}
-
-const findOptionsForVue = (config, lang, _loader) => {
- const uses = findUsesForVue(config, lang)
- const use = uses.find(({ loader }) => `${_loader}-loader` === loader)
- return use.options
-}
-
-const expectedCssLoaderModulesOptions = {
- importLoaders: 1,
- localIdentName: `[name]_[local]__[hash:base64:5]`,
- minimize: false,
- sourceMap: false,
- modules: true
-}
-
 test('default loaders', () => {
  const config = genConfig({ postcss: {}})
 
  LANGS.forEach(lang => {
  const loader = lang === 'css' ? [] : LOADERS[lang]
  expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader))
- // vue-loader loaders should not include postcss because it's built-in
- expect(findLoadersForVue(config, lang)).toEqual(['vue-style', 'css'].concat(loader))
  // assert css-loader options
  expect(findOptions(config, lang, 'css')).toEqual({
  minimize: false,
- sourceMap: false
+ sourceMap: false,
+ importLoaders: lang === 'css' ? 1 : 2
  })
- // files ending in .module.lang
- expect(findOptions(config, `module.${lang}`, 'css')).toEqual(expectedCssLoaderModulesOptions)
  })
-
  // sass indented syntax
  expect(findOptions(config, 'sass', 'sass')).toEqual({ indentedSyntax: true, sourceMap: false })
- expect(findOptionsForVue(config, 'sass', 'sass')).toEqual({ indentedSyntax: true, sourceMap: false })
 })
 
 test('production defaults', () => {
@@ -88,10 +62,10 @@ test('production defaults', () => {
  LANGS.forEach(lang => {
  const loader = lang === 'css' ? [] : LOADERS[lang]
  expect(findLoaders(config, lang)).toEqual([extractLoaderPath, 'vue-style', 'css', 'postcss'].concat(loader))
- expect(findLoadersForVue(config, lang)).toEqual([extractLoaderPath, 'vue-style', 'css'].concat(loader))
  expect(findOptions(config, lang, 'css')).toEqual({
  minimize: true,
- sourceMap: false
+ sourceMap: false,
+ importLoaders: lang === 'css' ? 1 : 2
  })
  })
 })
@@ -105,7 +79,13 @@ test('css.modules', () => {
  }
  })
  LANGS.forEach(lang => {
- expect(findOptions(config, lang, 'css')).toEqual(expectedCssLoaderModulesOptions)
+ expect(findOptions(config, lang, 'css')).toEqual({
+ importLoaders: lang === 'css' ? 0 : 1, // no postcss-loader
+ localIdentName: `[name]_[local]_[hash:base64:5]`,
+ minimize: false,
+ sourceMap: false,
+ modules: true
+ })
  })
 })
 
@@ -120,7 +100,6 @@ test('css.extract', () => {
  const extractLoaderPath = require.resolve('extract-text-webpack-plugin/dist/loader')
  LANGS.forEach(lang => {
  expect(findLoaders(config, lang)).not.toContain(extractLoaderPath)
- expect(findLoadersForVue(config, lang)).not.toContain(extractLoaderPath)
  })
 })
 
@@ -137,8 +116,6 @@ test('css.sourceMap', () => {
  expect(findOptions(config, lang, 'css').sourceMap).toBe(true)
  expect(findOptions(config, lang, 'postcss').sourceMap).toBe(true)
  expect(findOptions(config, lang, LOADERS[lang]).sourceMap).toBe(true)
- expect(findOptionsForVue(config, lang, 'css').sourceMap).toBe(true)
- expect(findOptionsForVue(config, lang, LOADERS[lang]).sourceMap).toBe(true)
  })
 })
 
@@ -172,9 +149,7 @@ test('css.loaderOptions', () => {
  })
 
  expect(findOptions(config, 'scss', 'sass')).toEqual({ data, sourceMap: false })
- expect(findOptionsForVue(config, 'scss', 'sass')).toEqual({ data, sourceMap: false })
  expect(findOptions(config, 'sass', 'sass')).toEqual({ data, indentedSyntax: true, sourceMap: false })
- expect(findOptionsForVue(config, 'sass', 'sass')).toEqual({ data, indentedSyntax: true, sourceMap: false })
 })
 
 test('skip postcss-loader if no postcss config found', () => {

packages/@vue/cli-service/lib/commands/build/index.js

@@ -41,12 +41,13 @@ module.exports = (api, options) => {
  } = require('@vue/cli-shared-utils')
 
  log()
+ const mode = api.service.mode
  if (args.target === 'app') {
- logWithSpinner(`Building for ${args.mode}...`)
+ logWithSpinner(`Building for ${mode}...`)
  } else {
  const buildMode = buildModes[args.target]
  if (buildMode) {
- logWithSpinner(`Building for ${args.mode} as ${buildMode}...`)
+ logWithSpinner(`Building for ${mode} as ${buildMode}...`)
  } else {
  throw new Error(`Unknown build target: ${args.target}`)
  }

packages/@vue/cli-service/lib/commands/build/resolveWcEntry.js

@@ -22,8 +22,8 @@ const createElement = (prefix, component, file, async) => {
  const { camelName, kebabName } = exports.fileToComponentName(prefix, component)
 
  return async
- ? `window.customElements.define('${kebabName}', wrap(Vue, () => import('~root/${file}')))\n`
- : `import ${camelName} from '~root/${file}'\n` +
+ ? `window.customElements.define('${kebabName}', wrap(Vue, () => import('~root/${file}?shadow')))\n`
+ : `import ${camelName} from '~root/${file}?shadow'\n` +
  `window.customElements.define('${kebabName}', wrap(Vue, ${camelName}))\n`
 }
 
@@ -52,7 +52,7 @@ import wrap from '@vue/web-component-wrapper'
 // runtime shared by every component chunk
 import 'css-loader/lib/css-base'
 import 'vue-style-loader/lib/addStylesShadow'
-import 'vue-loader/lib/runtime/component-normalizer'
+import 'vue-loader/lib/runtime/componentNormalizer'
 
 ;(() => {
  let i

packages/@vue/cli-service/lib/config/base.js

@@ -37,14 +37,26 @@ module.exports = (api, options) => {
  webpackConfig.module
  .noParse(/^(vue|vue-router|vuex|vuex-router-sync)$/)
 
- // js is handled by cli-plugin-bable
+ // js is handled by cli-plugin-bable ---------------------------------------
+
+ // vue-loader --------------------------------------------------------------
 
  webpackConfig.module
  .rule('vue')
  .test(/\.vue$/)
  .use('vue-loader')
  .loader('vue-loader')
- .options(Object.assign({}, options.vueLoader))
+ .options({
+ compilerOpitons: {
+ preserveWhitespace: false
+ }
+ })
+
+ webpackConfig
+ .plugin('vue-loader')
+ .use(require('vue-loader/lib/plugin'))
+
+ // static assets -----------------------------------------------------------
 
  webpackConfig.module
  .rule('images')
@@ -87,6 +99,17 @@ module.exports = (api, options) => {
  name: `fonts/[name].[hash:8].[ext]`
  })
 
+ // Other common pre-processors ---------------------------------------------
+
+ webpackConfig.module
+ .rule('pug')
+ .test(/\.pug$/)
+ .use('pug-plain-loader')
+ .loader('pug-plain-loader')
+ .end()
+
+ // shims
+
  webpackConfig.node
  .merge({
  // prevent webpack from injecting useless setImmediate polyfill because Vue