Variables HtmlWebpackPlugin不'；t将pug变量传递到包含的pug文件_Variables_Webpack_Pug_Html Webpack Plugin

Variables HtmlWebpackPlugin不'；t将pug变量传递到包含的pug文件

variables webpack

Variables HtmlWebpackPlugin不'；t将pug变量传递到包含的pug文件,variables,webpack,pug,html-webpack-plugin,Variables,Webpack,Pug,Html Webpack Plugin,我基本了解webpack和pug如何协同工作，使用HtmlWebpackPlugin使用pug模板生成包含捆绑资产的页面我用两个pug文件创建了一个非常简单的测试项目：head.pug包含中的内容，而index.pug是其余部分。我在index.pug中创建了一些变量，我希望通过使用include head.pug在head.pug中使用这些变量。下面是它们的样子： // head.pug // title #{title} if isProduction base(href='my

我基本了解

webpack

和

pug

如何协同工作，使用

HtmlWebpackPlugin

使用pug模板生成包含捆绑资产的页面

我用两个pug文件创建了一个非常简单的测试项目：

head.pug

包含

中的内容，而

index.pug

是其余部分。我在

index.pug

中创建了一些变量，我希望通过使用

include head.pug

在

head.pug

中使用这些变量。下面是它们的样子：

// head.pug //
title #{title}

if isProduction
    base(href='myurl.com/welcome/')

// index.pug //
- var isProduction = true
- var title = 'Testing'

doctype html
html
    head
        include head.pug
    body
        p My Site

如果我使用

pug cli

编译

index.pug

，它将创建以下

index.html

文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <base href="myurl.com/welcome/">
    </head>
    <body>
        <p>My Site</p>
    </body>
</html>

如您所见，标题未定义，iProduction为false，因此未插入

。怎么了？这是我的网页包配置文件：

const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle[contenthash].js'
  },
  module: {
    rules: [
      { test: /\.pug$/, loader: "pug-loader" },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), 
    new HtmlWebpackPlugin({
      template: '!!pug-loader!src/pug/index.pug',
      filename: path.join(__dirname, 'dist/index.html')
    })
  ]
};

使用以下加载程序对pug文件使用Webpack规则：

...
{
    test: /\.pug$/,
    use: [
        {
            loader: 'html-loader'
        },
        {
            loader: 'pug-html-loader'
        }
    ],
},
...

也许你可以摆脱

！！哈巴狗装载机：
...
new HtmlWebpackPlugin({
    template: './src/pug/index.pug',
    filename: path.join(__dirname, 'dist/index.html')
})
...

可能您必须通过npm安装装载机：
npm i html-loader pug-html-loader

应该有用。如何调用或呈现哈巴狗文件？@kmgt您是对的，它确实有效。然而，这是直接使用帕格。如果我使用HtmlWebpackPlugin，它就不起作用。我重写了这个问题。这并没有真正回答为什么帕格加载器不工作，但这个解决方案是有效的，所以我接受它。非常感谢。
npm i html-loader pug-html-loader