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

Question

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

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

我的webpack.common.config.js配置了pug加载器：

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

一个不再由Webpack处理的帕格文件的例子。

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-加载程序

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

这与Github pug-装载库上帕格-加载程序文档中的示例相匹配。

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

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

Answer 1

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

然后，我找到了添加html-loader作为第二个加载程序的引用。因此，现在我已经将rules部分中的配置更改为：

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

这让一切都能处理和构建的很好。