Webpack 不处理来自控制器中模板的 pug 文件

Question

我最近将一个 AngularJS (v1) 项目从 Webpack v1 更新到 v2，将 TypeScript v1 更新到 v2。该项目使用 pug 文件生成视图，在升级之前没有问题。

升级后，控制器中引用的 pug 文件不再由 Webpack 处理。在任何路由中指定的 Pug 文件仍然可以正常工作。

我的 webpack.common.config.js 已使用 pug-loader 配置了 pug：

module: {
  rules: [
    {
      test: /\.pug$/,
      use: ['pug-loader']
    },
  ]
}

Webpack 不再处理的 pug 文件示例。

this.$mdDialog.show({
  clickOutsideToClose: true,
  template: require('../components/ui/client.pug'),
  controller: ['$mdDialog', '$state', '$rootScope', 'clientService', ProfilePopupController],
  controllerAs: 'dm',
  bindToController: true,
  locals: { localData: popupData }
})

我试图通过使用

明确引用 pug-loader

template: require('pug-loader!../components/ui/client.pug');

这与 Github pug-loader repository

的 pug-loader 文档中的示例相匹配

template = require("pug-loader!./file.pug");

这给了我错误：

ERROR in ./~/pug-loader!./src/app/components/ui/client.pug Module build failed: Error: C:\Users\User\git\myapp\node_modules\pug-loader\index.js!C:\git\myapp\src\app\components\ui\client.pug:4:1

我有一个 Github 的小应用程序显示了这个问题。它位于 MyApp Repository。如果您构建此应用程序，您可以看到 main.controller.ts aboutPopup() 中引用的模板 pug 文件显示了部分处理的代码。构建完成后，转到“主要”并单击“关于”按钮。

Answer 1

我通过一些挖掘找到了解决方案。通过从 pug-loader 切换到 pug-html-loader，这显然不会自动在控制器中找到 pug 引用，这是关键的一步。我以前试过这个，但没有得到处理 HTML 所以放弃了。

然后我找到了添加 html-loader 作为第二个加载器的参考。所以现在我将 rules 部分中的配置更改为：

{
  test: /\.pug$/,
  use: [
    'html-loader',
    'pug-html-loader'
  ]
}

这让一切都能正常处理和构建。

Webpack 不处理来自控制器中模板的 pug 文件

Webpack does not process pug files from template in controller

angularjs

webpack

pug-loader