npm 包 swig-templates-webpack-plugin 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，经常需要使用到模板引擎来进行页面渲染，其中 Swig 是一个很不错的模板引擎。而 swig-templates-webpack-plugin 则是一个 webpack 插件，可以帮助我们在 webpack 中集成 Swig。本篇文章将介绍如何使用这个插件。

安装插件

先通过 npm 安装 swig-templates-webpack-plugin：

npm install swig-templates-webpack-plugin

安装完成后，在 webpack.config.js 中引入该插件：

-- -------------------- ---- -------
----- ----------------- - -----------------------------------------

-------------- - -
    -- ---
    -------- -
        --- -------------------
            -- -------
        --
    -
    -- ---
-

配置 Swig

在 webpack.config.js 中，我们需要配置一些 Swig 相关的设置。比如：

-- -------------------- ---- -------
----- ----------------- - -----------------------------------------

-------------- - -
    -- ---
    -------- -
        --- -------------------
            ----- -
                ------ --- ----
            --
            -------------- -
                ------- -
                    ---- -----
                -
            --
            ------------ -
                ------ -----
            -
        --
    -
    -- ---
-

data: 定义模板中使用的数据。
loaderOptions: 定义在模板渲染的过程中使用的变量和函数。
swigOptions: Swig 的配置选项。可以参考 Swig 文档。

编写模板

假设我们有一个主页面 index.html，文件结构如下：

project/
├── src/
│   ├── index.html
│   └── templates/
│       ├── header.html
│       └── footer.html
├── webpack.config.js
└── package.json

可以通过如下方式引入 header.html 和 footer.html：

{% include "templates/header.html" %}
<body>
    <h1>{{ title }}</h1>
</body>
{% include "templates/footer.html" %}

其中，title 对应的是我们在 webpack.config.js 中定义的数据。在 header.html 和 footer.html 中，我们也可以使用类似的方式引用其他模板或使用数据。

加载静态资源

首先在 webpack.config.js 中定义一个变量 STATIC_PATH，用于存放静态资源的路径：

const path = require("path");
const STATIC_PATH = path.join(__dirname, "static");

接着在 Swig Plugin 的配置项中，可以添加如下配置：

-- -------------------- ---- -------
----- ----------------- - -----------------------------------------

-------------- - -
    -- ---
    -------- -
        --- -------------------
            -------------- -
                ------- -
                    -----------
                -
            -
        --
    -
    -- ---
-

在模板中使用该变量：

{% extends "base.html" %}
{% block content %}
<img src="{{ STATIC_PATH }}/img/logo.png" alt="My App">
{% endblock %}

因为我们已经把 STATIC_PATH 变量放入了 locals 中，因此可以直接在模板中使用。

指定输出文件名

默认情况下，Swig Plugin 会把所有的模板都打包到输出文件中，输出文件名为 index.html。如果希望把每个模板打包成单独的文件，可以在 Swig Plugin 的配置项中添加如下配置：

-- -------------------- ---- -------
----- ----------------- - -----------------------------------------

-------------- - -
    -- ---
    -------- -
        --- -------------------
            --------- ------------- -- -----
        --
    -
    -- ---
-

这样，每个模板就会被编译成一个单独的 HTML 文件。

示例代码

以下是完整的示例代码：

webpack.config.js：

-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -----------------------------------------

----- ----------- - -------------------- ----------

-------------- - -
    ------ -----------------
    ------- -
        ----- ----------------------- --------
        --------- -----------
    --
    ------- -
        ------ -
            -
                ----- ----------
                ------- -------------
            -
        -
    --
    -------- -
        --- -------------------
            ----- -
                ------ --- ----
            --
            -------------- -
                ------- -
                    -----------
                -
            --
            ------------ -
                ------ -----
            --
            --------- -------------
        --
    -
--

index.html：

{% extends "base.html" %}
{% block content %}
<img src="{{ STATIC_PATH }}/img/logo.png" alt="My App">
{% endblock %}

如果希望使用 webpack-dev-server 进行开发，可以添加如下配置：

module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000
    }
}

之后启动 webpack-dev-server：

npx webpack-dev-server --open

就可以在浏览器中预览效果了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b4a