npm i -D pug pug-html-loader pug-plain-loader

module: {

  rules: [

   {

    test:/\.pug$/,

    loader: "pug-html-loader"

   },

   // 省略其他规则

  ]

 }

module.exports = {

  chainWebpack: config => {

      config.module.rule('pug')

          .test(/\.pug$/)

          .use('pug-html-loader')

          .loader('pug-html-loader')

          .end()

  }

}

<template lang='pug' ></template>

section.pugModel

        //-  这是注释，测试pug，for循环(1)

        div.title 测试pug，for循环(1)

        ul

            -   let foo = [{name:'小站',age:25,sex:0},{name:'王波',age:18,sex:0},{name:'张二',age:30,sex:1}]

            each item in foo

                li

                    span.listItem= `名字:${item.name}——`

                    span.listItem= `年龄:${item.age}——`

                    span.listItem( @click='sexClick' style= `${Object.is(item.sex,0) ? "color:blue;" : "color:red;"}`)= `性别:${Object.is(item.sex,0) ? "男" : "女"}`