剧场模式
首页前端Webpackwebpack 3 零基础入门视频教程

webpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板

求知小风 · 真仙发布于
2

首先肯定会问什么是 pug,如果是 nodejs 程序员的话,肯定听过 jade 吧,pug 就是 从 jade 改名过来的。

说白了,它就是可以让你以更好的语法来写 html 。

下面看看例子就会清楚的。

现在我们就要代替之前的 src/index.html 改用 pug 语法来写。

首先把 src/index.html 改名叫 src/index.pug

$ rename src/index.html src/index.pug

src/index.pug

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #root
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

上面的内容是从 pug 官方的示例中抄的,然后稍微改了一下。

webpack.config.js

...

module.exports = {
  ...
  plugins: [
    ...
    new HtmlWebpackPlugin({
      template: './src/index.pug',
      ...
    }),
    ...
  ],
  module: {
    rules: [
      ...
      { test: /\.pug$/, loader: ['raw-loader', 'pug-html-loader'] }
    ]
  }
};
$ npm install --save-dev pug pug-html-loader raw-loader

这样基本没啥问题,来看下结果:

我们来试试 puginclude 功能,就是可以包含子模板。

src/index.pug

...
  body
    include includes/header.pug
    ...

src/includes/header.png

h1 from header pug file

目录结构是这样的:

src
├── Root.js
├── app.js
├── app.scss
├── contact.html
├── contact.js
├── includes
│   └── header.pug
└── index.pug

结果:

先这样吧。

0 条回复
暂无回复~~
加微信(qiuzhi99666)入群官方服务号
随机课程
GraphQL + React + React Router + Apollo 实战教程

GraphQL + React + React Router + Apollo 实战教程

10 个视频1 小时 12 分钟初级

Pro¥ 149.00¥ 119.20

GraphQL已完结新课程

学员(17)
小杰 · 化神cooltan · 太乙toutou · 元婴大布丁 · 元婴dear°学会微笑 · 元婴React-小白 · 合体 · 元婴fengjunhua · 元婴尹迪 · 合体daniel_mea · 元婴何芳临 · 元婴woshimaxiaorui · 真仙
最新动态
小杰 · 化神学习到了4:16
cooltan · 太乙学习到了4:16
toutou · 元婴学习到了4:16
大布丁 · 元婴学习到了0:11
dear°学会微笑 · 元婴学习到了4:16
统计信息
    学员: 15782
    视频数量: 918
    帖子数量: 406

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:144

Top