2

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

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

我webpack.common.config.js的哈巴狗配置了哈巴狗装载机：

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 存储库中的 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 中引用的模板 pug 文件aboutPopup()显示了部分处理的代码。构建后，转到 Main 并单击 About 按钮。

4

1 回答 1

3

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

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

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

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

于 2017-03-21T02:27:00.400 回答