feat: upgrade to vue-loader 15

yyx990803 · yyx990803 · commit f5c0f5867378 · 2018-05-04T18:58:11.000-04:00
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.
diff --git a/packages/@vue/cli-plugin-babel/index.js b/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
-        })
   })
 }
diff --git a/packages/@vue/cli-plugin-eslint/index.js b/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')
diff --git a/packages/@vue/cli-plugin-typescript/index.js b/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.
diff --git a/packages/@vue/cli-service-global/lib/globalConfigPlugin.js b/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')
diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/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', () => {
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/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}`)
       }
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveWcEntry.js b/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
diff --git a/packages/@vue/cli-service/lib/config/base.js b/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
diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js
diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js
diff --git a/packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js b/packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js
diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
