静态 Pug/HTML 页面的 Webpack 配置

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 (with and without the ?exports=false option), html-loader, extract-loader, extract-text-webpack-plugin, and file-loader 的各种组合，但我尝试的所有内容在生成的 .html 文件中都有额外的工件。例如。它可能以 module.exports = 开头，或者它可能将 \" 放在文件中应该只有 ".

的任何地方

有人能帮忙吗？

Answer 1

啊！我终于弄明白了。我从根本上误解了加载程序列表的工作方式。我假设只使用了数组中第一个匹配的加载器，但不，所有匹配的加载器都被使用了。（虽然我对细节仍然很模糊。）这是一个工作配置，其中 resources 是我的 "resources" 目录的路径：

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 配置

Webpack Config for Static Pug/HTML Pages

angularjs

webpack

pug-loader