当空加载程序添加到 webpack 的 .use 子句时，Vue 自定义块会产生错误

Question

如果vue文件中有自定义块。例如

<router3333>
    path: /:category/:segment
</router3333>

它将被编译并在 .use 子句中配置为唯一的 vue 加载器时正常工作

如果我将另一个加载器添加到 use 子句中，例如整个加载器什么都不做

module.exports = function (source) { return source }

编译将因错误而失败

Module parse failed: Unexpected token (24:17)
File was processed with these loaders:
 * ./my-loader.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> path: /:category/:segment

两种情况下 vue-loader 的输出是一样的

import { render, staticRenderFns } from "./xxxc.vue?vue&type=template&id=0067048f&"                                                                                                       01:13:55
import script from "./xxxc.vue?vue&type=script&lang=ts&"
export * from "./xxxc.vue?vue&type=script&lang=ts&"


/* normalize component */
import normalizer from "!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
var component = normalizer(
  script,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null

)

/* custom blocks */
import block0 from "./xxxc.vue?vue&type=custom&index=0&blockType=router3333"
if (typeof block0 === 'function') block0(component)

export default component.exports

因此，只需添加一个在 use 子句中不执行任何操作的加载器，自定义块就会失败。这里发生了什么以及如何避免它？

这里是重现https://codesandbox.io/s/codesandbox-nuxt-4dqmy 如果在 nuxt.config 中设置 vuetify.treeShake: true - 它将执行此处描述的操作，例如添加另一个加载程序以使用子句，这将导致错误。加载程序代码本身并不重要，因为它也会发生在空加载程序中。

Answer 1

Whats happening here ...?

答案很简单——因为你有另一个用于 vue 文件的加载器（这就是为什么即使 vuetify-loader 也会使你的构建失败），并且可以用 vue-loader source code function which is responsible for this. It just checks number of loaders and decides to add import statement for a custom block or just pass empty string [code block] 来证明。

... and how to avoid it ?

Vue-loader 有自定义块功能的文档部分。您可以使用 blockType 查询参数创建一个 新规则 来处理您的自定义 router3333 区块代码：

rules: [
  // ...
  {
    resourceQuery: /blockType=router3333/,
    loader: require.resolve('./my-loader')
  }
  // ...
]

如您所见，您应该在上面的代码中使用块标记作为类型。

如果您现在不想对您的自定义块内容做任何事情，只需 return 来自加载程序函数的 空字符串 。

Vue-loader Custom Blocks

当空加载程序添加到 webpack 的 .use 子句时，Vue 自定义块会产生错误

Vue custom block produce error when an empty loader added to .use clause of webpack

vue.js

webpack

vuejs2

webpack-4

vue-loader