Question

我正在转换网站以使用Webpack，我需要一点配置帮助。我有几页用Pug/Jade写的很大且不经常访问的页面（想想服务条款或隐私政策）。我的大多数.jade文件都是Angular模板，因此它们的组件内联并且运行良好。但是，我希望Webpack能够编译成与应用程序其余部分分开提供的静态HTML文件。但是，我仍然喜欢他们的文件名包含哈希值。

我提出的基本想法是这样的：

在routes.ts：

$routeProvider.when('/_tos', templateUrl: require('./resources/terms-of-service.jade'))

在webpack.config.js的加载器列表中：

{
  test: /resources.*\.jade$/,
  loaders: ['file?name=[name].[hash].html', 'pug-html']
}

我已尝试使用pug-loader，pug-html-loader（有和没有?exports=false选项），html-loader，extract-loader，{{的各种组合3}}和extract-text-webpack-plugin，但我尝试的所有内容在生成的.html文件中都有额外的工件。例如。它可以从module.exports =开始，也可以将\"放在应该只有"的文件中。

有人可以帮忙吗？

Answer 1

尔加！我终于弄明白了。我从根本上误解了装载机列表的工作方式。我假设只使用了匹配的数组中的第一个加载器，但是没有使用匹配的所有加载器。（虽然我对细节仍然很模糊。）这是一个有效的配置，其中resources是我的资源的路径＆＃34;目录：

loaders: [
  {
    test: /\.jade$/,
    include: [resources],
    loaders: ['file?name=[name].[hash].html', 'pug-html?exports=false']
  },
  {
    test: /\.jade$/,
    exclude: [resources],
    loaders: ['pug-html?doctype=html']
  }
]

静态Pug / HTML页面的Webpack配置

1 个答案: