Webpack 中应用的订单加载器是什么？

Question

我正在尝试根据临时文件扩展名设置

.pug

文件的加载，因此它应该是默认的。

{ test: /\.vue.pug$/, /* ... */ }

部分与Vue框架相关，是

@webdiscus/pug-loader

的开发者推荐给我的。最后一部分 (

test: /(?!.*\.vue\.pug$).*\.pug$/

) 是 Pug 文件的默认加载器。

{

  // ...

  module: {

    //
    rules: [

      // === Loading of Pug from files related with Vue
      {
        test: /\.vue.pug$/,
        oneOf: [
          // allow <template lang="pug"> in Vue components
          {
            resourceQuery: /.vue$/u,
            loader: '@webdiscus/pug-loader', // <-- it is same pug-loader as in PugPlugin.loader
            options: {
              method: 'html', // render Pug into pure HTML string
            },
          },
          // allow import of Pug in JS/TS and for "other cases", if a file hasn't the extension `.vue`
          {
            resourceQuery: ".vue.ts",
            loader: '@webdiscus/pug-loader', // <-- it is same pug-loader as in PugPlugin.loader
            options: {
              method: 'compile', // compile Pug into template function, use it if you want pass custom data into template on clinet-side rendering.
              //method: 'render', // compile Pug into template string, use if your template has't external custom data, generates smallest file
              //esModule: true, // should be `true` for importing in ES module, e.g. `import tmpl from './myTemplate.pug';`
                              // defaults is false, used for CommonJS, e.g.  `const tmpl = require('./myTemplate.pug');`
                              // NOTE: this option is optional, if it is not defined, importing in ES module works too.
            },
          },
        ],
      },

      // Loading of Pug from files not related with Vue
      {
        test: /(?!.*\.vue\.pug$).*\.pug$/,
        loader: '@webdiscus/pug-loader',
        options: {
          method: 'render'
        },
      },

    ]
  },

  // ...

};

虽然构建执行时没有错误，但如果在浏览器中运行脚本，我们会得到一个错误：

Uncaught TypeError: _ExampleMultipleFilesComponent_vue_pug__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

如果删除以下部分并且不将

.pug

文件导入到非vue文件中，则不会出现错误。

{
  test: /(?!.*\.vue\.pug$).*\.pug$/,
  loader: '@webdiscus/pug-loader',
  options: {
    method: 'render'
  },
}

Repro 存储库（请确保您正在签出 @problem/default_loader 分支）

看起来我不明白Webpack如何选择合适的加载器。 请解释一下。

Answer 1

虽然构建执行时没有错误，但如果在浏览器中运行脚本，我们会得到一个错误：

我无法在浏览器（FireFox）中重现该错误。在浏览器中我看到编译的 Vue 组件：

Example single file component
Example multiple files component with custom variable "someText": Hello Pug!

解释哈巴狗装载机的工作原理

{
  test: /\.pug$/,
  oneOf: [
    // [1] issuer is VUE file
    {
      resourceQuery: /^\?vue/u,
      loader: '@webdiscus/pug-loader',
      options: {
        method: 'html', // exports rendered HTML sting
      },
    },
    // [2] issuer is TS file
    {
      loader: '@webdiscus/pug-loader',
      options: {
        method: 'compile', // export compiled template function
      },
    },
  ],
}

您在任意位置加载 Pug 文件

.pug

，然后 Webpack 选择规则通过加载器处理该文件。

Pug 文件的加载位置很重要，因为对于每个

issuer

（父级）都会生成预期的结果。

您有两种发行人类型：

1. Vue

   文件。 如果您在 Vue 文件中使用 Pug 代码，例如在

   ExampleSingleFileComponent.vue

   中，然后 Webpack 选择

   [1]

   加载器，其中包含将 Pug 渲染为纯

   HTML

   字符串的选项，在这种情况下是预期的。

2. TS

   文件。 如果您在 TS/JS 中加载 Pug 文件，例如在

   ExampleMultipleFilesComponent.vue.ts

   中，然后 Webpack 选择

   [2]

   加载器，其中包含将 Pug 文件编译为 JS

   template function

   的选项。您可以使用变量调用此模板函数，以在运行时在浏览器中将其呈现为 HTML。