如何为基于Webpack的Svelte项目配置Pug预处理器？

原Vue项目使用的Pug Webpack配置无法直接用于Svelte项目，你的判断是正确的，Svelte确实需要额外的预处理支持来兼容Pug语法及+if()、+each()等专属模板mixin。

你给出的TS类型标注报错和Pug配置无关，是svelte-loader未开启TypeScript预处理导致的，下面是完整的Webpack适配方案：

1. 前置依赖安装 #

需要先安装svelte-preprocess作为Svelte的语法预处理工具，以及Pug本身：

npm install -D pug svelte-preprocess

2. Webpack配置修改 #

直接替换原有Pug相关规则，调整svelte-loader配置即可：

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      // 原有其他规则保留
      {
        test: /\.svelte$/u,
        use: [
          {
            loader: 'svelte-loader',
            options: {
              // 开启多语法预处理支持
              preprocess: sveltePreprocess({
                // 自动支持Pug语法及Svelte专属的+if/+each等mixin
                pug: true,
                // 开启TS支持，解决你遇到的类型标注解析报错
                typescript: true
              })
            }
          }
        ]
      },
      // 如有单独引入外部.pug文件的需求，保留以下规则，否则可删除
      {
        test: /\.pug$/u,
        exclude: /node_modules/u,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: { caseSensitive: true }
            }
          },
          "pug-html-loader"
        ]
      }
    ]
  }
}

3. Svelte文件声明 #

在使用Pug的Svelte单文件中，给模板块添加lang="pug"声明即可：

<script lang="ts">
export const rootElementTag: string = "div";
let show = true;
let list = [1,2,3];
</script>

<template lang="pug">
{rootElementTag}.root
  +if(show)
    span 可见内容
  +each(list as item)
    div item-{item}
</template>

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD