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

* https://github.com/vuejs/vue-loader: (23 commits) chore: changelog 15.6.0 feat: make `__file` injection opt-in in production (vuejs#1475) fix: template comments replace windows \ to / confirm consistent hash (vuejs#1477) docs(zh): updated eslint plugin link (vuejs#1471) chore: todo [ci skip] feat: support for compiler 2.6 outputSourceRange feat: support webpack 5 hooks (vuejs#1469) docs: [RU] Translation update (vuejs#1470) chore: changelog 15.5.1 fix: avoid to generate empty css chunk files (vuejs#1464) chore: changelog 15.5.0 feat: add `prettify` option (vuejs#1461) chore: add missing dependencies (vuejs#1336) fix: css modules extends error (vuejs#1452) docs: [RU] Translation update (vuejs#1448) Update eslint-plugin-vue documentation link (vuejs#1444) docs: remove unnecessary `path` module usage (vuejs#1430) ...
alfredriesen · Jan 23, 2019 · cc701fc · cc701fc
2 parents 91c7f41 + 87f0a2f
commit cc701fc
Show file tree

Hide file tree

Showing 25 changed files with 727 additions and 934 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,57 @@
+<a name="15.6.0"></a>
+# [15.6.0](https://github.com/vuejs/vue-loader/compare/v15.5.1...v15.6.0) (2019-01-23)
+
+
+### Bug Fixes
+
+* template comments replace windows \ to / confirm consistent hash ([#1477](https://github.com/vuejs/vue-loader/issues/1477)) ([adc6dd6](https://github.com/vuejs/vue-loader/commit/adc6dd6))
+
+
+### Features
+
+* make `__file` injection opt-in in production ([#1475](https://github.com/vuejs/vue-loader/issues/1475)) ([001382d](https://github.com/vuejs/vue-loader/commit/001382d))
+* support for compiler 2.6 outputSourceRange ([2215585](https://github.com/vuejs/vue-loader/commit/2215585))
+* support webpack 5 hooks ([#1469](https://github.com/vuejs/vue-loader/issues/1469)) ([7275ae4](https://github.com/vuejs/vue-loader/commit/7275ae4))
+
+
+
+<a name="15.5.1"></a>
+## [15.5.1](https://github.com/vuejs/vue-loader/compare/v15.5.0...v15.5.1) (2019-01-08)
+
+
+### Bug Fixes
+
+* avoid to generate empty css chunk files ([#1464](https://github.com/vuejs/vue-loader/issues/1464)) ([c444ab6](https://github.com/vuejs/vue-loader/commit/c444ab6))
+
+
+
+<a name="15.5.0"></a>
+# [15.5.0](https://github.com/vuejs/vue-loader/compare/v15.4.0...v15.5.0) (2019-01-04)
+
+
+### Bug Fixes
+
+* css modules extends error ([#1452](https://github.com/vuejs/vue-loader/issues/1452)) ([082c6ea](https://github.com/vuejs/vue-loader/commit/082c6ea)), closes [#1449](https://github.com/vuejs/vue-loader/issues/1449)
+* hide ext appending behind a flag (ref [#1372](https://github.com/vuejs/vue-loader/issues/1372)) ([f0beed3](https://github.com/vuejs/vue-loader/commit/f0beed3))
+* include query in loader dedupe ([4a894de](https://github.com/vuejs/vue-loader/commit/4a894de)), closes [vue-cli#2451](https://github.com/vue-cli/issues/2451)
+
+
+### Features
+
+* add `prettify` option ([#1461](https://github.com/vuejs/vue-loader/issues/1461)) ([62a9155](https://github.com/vuejs/vue-loader/commit/62a9155)), closes [#1426](https://github.com/vuejs/vue-loader/issues/1426)
+
+
+
+<a name="15.4.2"></a>
+## [15.4.2](https://github.com/vuejs/vue-loader/compare/v15.4.1...v15.4.2) (2018-09-11)
+
+
+### Bug Fixes
+
+* include query in loader dedupe ([4a894de](https://github.com/vuejs/vue-loader/commit/4a894de)), closes [vue-cli#2451](https://github.com/vue-cli/issues/2451)
+
+
+
 <a name="15.4.1"></a>
 ## [15.4.1](https://github.com/vuejs/vue-loader/compare/v15.4.0...v15.4.1) (2018-08-26)
 

diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -37,7 +37,6 @@ A more complete example webpack config will look like this:
 
 ``` js
 // webpack.config.js
-const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 module.exports = {

diff --git a/docs/guide/linting.md b/docs/guide/linting.md
@@ -2,7 +2,7 @@
 
 ## ESLint
 
-The official [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) supports linting both the template and script parts of Vue single file components.
+The official [eslint-plugin-vue](https://eslint.vuejs.org/) supports linting both the template and script parts of Vue single file components.
 
 Make sure to use the plugin's included config in your ESLint config:
 

diff --git a/docs/options.md b/docs/options.md
@@ -85,3 +85,19 @@ When both options are specified, enables file-system-based template compilation
 ::: tip
   Interaction between `vue-loader` and `cache-loader` uses [inline loader import syntax](https://webpack.js.org/concepts/loaders/#inline) under the hook, the `!` will be treated as the separator between different loaders, so please ensure `cacheDirectory` doesn't contain `!`.
 :::
+
+## prettify
+
+- type: `boolean`
+- default: `true`
+
+In development mode, we use [prettier](https://prettier.io/) to format the compiled render function for ease of debugging by default. However, if you encounter any obscure bug of prettier, such as [exponential compilation time for deeply nested functions](https://github.com/prettier/prettier/issues/4672), you can disable this option to circumvent it.
+
+## exposeFilename
+
+- type: `boolean`
+- default: `false`
+
+In non-production environments, vue-loader injects a `__file` property to components for better debugging experience. If the `name` property is missing in a component, Vue will infer it from the `__file` field to display in console warnings.
+
+This property is stripped in production builds by default. But you may want to retain it if you are developing a component library and don't want to bother specifying `name` in each component. Then you can turn this option on.
diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md
@@ -37,7 +37,6 @@ module.exports = {
 
 ``` js
 // webpack.config.js
-const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 module.exports = {

diff --git a/docs/ru/guide/linting.md b/docs/ru/guide/linting.md
@@ -2,7 +2,7 @@
 
 ## ESLint
 
-Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
+Официальный плагин [eslint-plugin-vue](https://eslint.vuejs.org/) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
 
 Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
 

diff --git a/docs/ru/guide/testing.md b/docs/ru/guide/testing.md
@@ -2,4 +2,4 @@
 
 - [Vue CLI](https://github.com/vuejs/vue-cli) предлагает вам готовые решения для модульного и e2e-тестирования.
 
-- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-mocha-webpack) или [Jest](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-jest).
+- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org/ru/), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-mocha-webpack) или [Jest](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-jest).
diff --git a/docs/ru/options.md b/docs/ru/options.md
@@ -85,3 +85,10 @@ sidebar: auto
 ::: tip СОВЕТ
   Взаимодействие между `vue-loader` и `cache-loader` использует [инлайновый синтаксис импорта загрузчиков](https://webpack.js.org/concepts/loaders/#inline) внутри, где символ `!` будет рассматриваться как разделитель между различными загрузчиками. Поэтому убедитесь, что `cacheDirectory` не содержит символов `!`.
 :::
+
+## prettify
+
+- Тип: `boolean`
+- По умолчанию: `true`
+
+В режиме разработки по умолчанию используется [prettier](https://prettier.io/) для форматирования скомпилированной render-функции для удобства отладки. Однако, если вы столкнётесь с какой-либо непонятной ошибкой самого prettier, такой как [экспоненциальное время компиляции для глубоко вложенных функций](https://github.com/prettier/prettier/issues/4672), можно отключить эту опцию.
diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
@@ -37,7 +37,6 @@ module.exports = {
 
 ``` js
 // webpack.config.js
-const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 module.exports = {

diff --git a/docs/zh/guide/linting.md b/docs/zh/guide/linting.md
@@ -2,7 +2,7 @@
 
 ## ESLint
 
-官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
+官方的 [eslint-plugin-vue](https://eslint.vuejs.org/) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
 
 请确认在你的 ESLint 配置文件中使用该插件要导入的配置：
 

diff --git a/docs/zh/options.md b/docs/zh/options.md
@@ -85,3 +85,10 @@ sidebar: auto
 ::: tip 注意
   在内部，`vue-loader` 和 `cache-loader` 之间的交互使用了 [loader 的内联 import 语法](https://webpack.js.org/concepts/loaders/#inline)，`!` 将会被认为是不同 loaders 之间的分隔符，所以请确保你的 `cacheDirectory` 路径中不包含 `!`。
 :::
+
+## prettify
+
+- 类型：`boolean`
+- 默认值：`true`
+
+在开发环境下，我们默认使用 [prettier](https://prettier.io/) 格式化编译后的模板渲染代码，以方便调试。然而，如果你开发时碰到了 prettier 的某些罕见 bug，比如[格式化多层嵌套的函数时运行时间过长](https://github.com/prettier/prettier/issues/4672)，你可以通过禁用这个选项来绕开。
diff --git a/lib/codegen/styleInjection.js b/lib/codegen/styleInjection.js
@@ -1,5 +1,6 @@
 const { attrsToQuery } = require('./utils')
 const hotReloadAPIPath = JSON.stringify(require.resolve('vue-hot-reload-api'))
+const nonWhitespaceRE = /\S+/
 
 module.exports = function genStyleInjectionCode (
   loaderContext,
@@ -48,6 +49,7 @@ module.exports = function genStyleInjectionCode (
       styleInjectionCode += `
         cssModules[${name}] = ${locals}
         Object.defineProperty(this, ${name}, {
+          configurable: true,
           get: function () {
             return cssModules[${name}]
           }
@@ -68,6 +70,8 @@ module.exports = function genStyleInjectionCode (
     }
   }
 
+  // filter out empty styles (with no `src` specified or only contains whitespaces)
+  styles = styles.filter(style => style.src || nonWhitespaceRE.test(style.content))
   // explicit injection is needed in SSR (for critical CSS collection)
   // or in Shadow Mode (for injection into shadow root)
   // In these modes, vue-style-loader exports objects with the __inject__

diff --git a/lib/index.js b/lib/index.js
@@ -176,14 +176,15 @@ var component = normalizer(
   }
 
   // Expose filename. This is used by the devtools and Vue runtime warnings.
-  code += `\ncomponent.options.__file = ${
-    isProduction
-      // For security reasons, only expose the file's basename in production.
-      ? JSON.stringify(filename)
-      // Expose the file's full path in development, so that it can be opened
-      // from the devtools.
-      : JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))
-  }`
+  if (!isProduction) {
+    // Expose the file's full path in development, so that it can be opened
+    // from the devtools.
+    code += `\ncomponent.options.__file = ${JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))}`
+  } else if (options.exposeFilename) {
+    // Libraies can opt-in to expose their components' filenames in production builds.
+    // For security reasons, only expose the file's basename in production.
+    code += `\ncomponent.options.__file = ${JSON.stringify(filename)}`
+  }
 
   code += `\nexport default component.exports`
   // console.log(code)

diff --git a/lib/loaders/pitcher.js b/lib/loaders/pitcher.js
@@ -63,14 +63,19 @@ module.exports.pitch = function (remainingRequest) {
     // also make sure to dedupe based on loader path.
     // assumes you'd probably never want to apply the same loader on the same
     // file twice.
+    // Exception: in Vue CLI we do need two instances of postcss-loader
+    // for user config and inline minification. So we need to dedupe baesd on
+    // path AND query to be safe.
     const seen = new Map()
     const loaderStrings = []
 
     loaders.forEach(loader => {
-      const type = typeof loader === 'string' ? loader : loader.path
+      const identifier = typeof loader === 'string'
+        ? loader
+        : (loader.path + loader.query)
       const request = typeof loader === 'string' ? loader : loader.request
-      if (!seen.has(type)) {
-        seen.set(type, true)
+      if (!seen.has(identifier)) {
+        seen.set(identifier, true)
         // loader.request contains both the resolved loader path and its options
         // query (e.g. ??ref-0)
         loaderStrings.push(request)
@@ -107,9 +112,9 @@ module.exports.pitch = function (remainingRequest) {
         // For some reason, webpack fails to generate consistent hash if we
         // use absolute paths here, even though the path is only used in a
         // comment. For now we have to ensure cacheDirectory is a relative path.
-        cacheDirectory: path.isAbsolute(cacheDirectory)
+        cacheDirectory: (path.isAbsolute(cacheDirectory)
           ? path.relative(process.cwd(), cacheDirectory)
-          : cacheDirectory,
+          : cacheDirectory).replace(/\\/g, '/'),
         cacheIdentifier: hash(cacheIdentifier) + '-vue-loader-template'
       })}`]
       : []

diff --git a/lib/loaders/templateLoader.js b/lib/loaders/templateLoader.js
@@ -20,7 +20,10 @@ module.exports = function (source) {
 
   // allow using custom compiler via options
   const compiler = options.compiler || require('vue-template-compiler')
-  const compilerOptions = Object.assign({}, options.compilerOptions, {
+
+  const compilerOptions = Object.assign({
+    outputSourceRange: true
+  }, options.compilerOptions, {
     scopeId: query.scoped ? `data-v-${id}` : null,
     comments: query.comments
   })
@@ -36,25 +39,40 @@ module.exports = function (source) {
     transformAssetUrls: options.transformAssetUrls || true,
     isProduction,
     isFunctional,
-    optimizeSSR: isServer && options.optimizeSSR !== false
+    optimizeSSR: isServer && options.optimizeSSR !== false,
+    prettify: options.prettify
   }
 
   const compiled = compileTemplate(finalOptions)
 
   // tips
   if (compiled.tips && compiled.tips.length) {
     compiled.tips.forEach(tip => {
-      loaderContext.emitWarning(tip)
+      loaderContext.emitWarning(typeof tip === 'object' ? tip.msg : tip)
     })
   }
 
   // errors
   if (compiled.errors && compiled.errors.length) {
-    loaderContext.emitError(
-      `\n  Error compiling template:\n${pad(compiled.source)}\n` +
-        compiled.errors.map(e => `  - ${e}`).join('\n') +
+    // 2.6 compiler outputs errors as objects with range
+    if (compiler.generateCodeFrame && finalOptions.outputSourceRange) {
+      // TODO account for line offset in case template isn't placed at top
+      // of the file
+      loaderContext.emitError(
+        `\n\n  Errors compiling template:\n\n` +
+        compiled.errors.map(({ msg, start, end }) => {
+          const frame = compiler.generateCodeFrame(source, start, end)
+          return `  ${msg}\n\n${pad(frame)}`
+        }).join(`\n\n`) +
         '\n'
-    )
+      )
+    } else {
+      loaderContext.emitError(
+        `\n  Error compiling template:\n${pad(compiled.source)}\n` +
+          compiled.errors.map(e => `  - ${e}`).join('\n') +
+          '\n'
+      )
+    }
   }
 
   const { code } = compiled

diff --git a/lib/plugin.js b/lib/plugin.js
@@ -10,7 +10,14 @@ class VueLoaderPlugin {
     if (compiler.hooks) {
       // webpack 4
       compiler.hooks.compilation.tap(id, compilation => {
-        compilation.hooks.normalModuleLoader.tap(id, loaderContext => {
+        let normalModuleLoader
+        if (Object.isFrozen(compilation.hooks)) {
+          // webpack 5
+          normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader
+        } else {
+          normalModuleLoader = compilation.hooks.normalModuleLoader
+        }
+        normalModuleLoader.tap(id, loaderContext => {
           loaderContext[NS] = true
         })
       })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-loader",
-  "version": "15.4.1",
+  "version": "15.6.0",
   "description": "Vue single-file component loader for Webpack",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -33,10 +33,11 @@
     ]
   },
   "peerDependencies": {
-    "css-loader": "*"
+    "css-loader": "*",
+    "webpack": "^4.1.0 || ^5.0.0-0"
   },
   "dependencies": {
-    "@vue/component-compiler-utils": "^2.0.0",
+    "@vue/component-compiler-utils": "^2.4.0",
     "hash-sum": "^1.0.2",
     "loader-utils": "^1.1.0",
     "vue-hot-reload-api": "^2.3.0",
@@ -57,6 +58,7 @@
     "jsdom": "^11.6.2",
     "lint-staged": "^7.0.0",
     "markdown-loader": "^2.0.2",
+    "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.7.2",
     "normalize-newline": "^3.0.0",
@@ -66,6 +68,7 @@
     "pug-plain-loader": "^1.0.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.7",
+    "source-map": "^0.5.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "sugarss": "^1.0.1",
@@ -78,7 +81,7 @@
     "vuepress": "^0.14.2",
     "vuepress-theme-vue": "^1.1.0",
     "webpack": "^4.1.0",
-    "webpack-cli": "^2.0.10",
+    "webpack-cli": "^3.2.0",
     "webpack-dev-server": "^3.1.1",
     "webpack-merge": "^4.1.2",
     "yorkie": "^1.0.3"