主页 / 问题 / 584304
Accepted
Monarch
Asked:2020-10-29 23:13:20 +0800 CST2020-10-29 23:13:20 +0800 CST

如何将 jade/pug 转换为 webpack？

  • 772

我最近从 Gulp 切换到 WebPack，并意识到我不能简单地设置从 jade 到 html 的转换，据我了解，webpack 根本不像 Gulp 那样工作。在 Gulp 中，我刚刚编写了将 jade 转换为 html 的任务，html 页面出现在我的输出中。请解释如何在 webpack 中做这样的事情，如果他们不这样做，那么他们如何在 webpack 中使用 jade？

附言一个很好的例子会很好

webpack

2 个回答

  1. Best Answer

    以下示例对我有用：

    npm i pug-loader -D

    webpack.config.js

    loaders: [
     // pug
     {
            test: /\.pug$/,
            loader: "pug-loader"
     }
]

    我们连接模板

    var template = require('./views/layout.pug');

    如果您在调用中指定加载器（例如：require("pug!./file.pug")），在 pug 中使用 mixins 时可能会出现问题。

    • 1

  2. webpack 的特点是它的输出总是一个 js 包。所以只能在一些js文件中使用jade转成html。

    要在 webpack 中加载 jade/pug，你需要使用 pug -loader：

    var template = require("pug!./file.pug");

    不要忘记通过 npm 安装 pug-loader 包。

    要在单独的文件中获取模板，您可以尝试使用文件加载器：

    var link = require("file!pug!./file.pug");

    如果上面的行不起作用，您可以尝试添加提取物：

    var link = require("file!extract!pug!./file.pug");
    • 0

相关问题