将 JSON 传递给 pug 模板

Question

我不知道如何在我的 pug 模板中访问 JSON 数据。

这是我的哈巴狗布局

title #{htmlWebpackPlugin.pages[page].title}

正在初始化页面变量的 Pug 页面

block vars
 - var page = "catalog"

Webpack 部分

new HtmlWebpackPlugin({
    filename: 'catalog.html',
    chunks: ['main'],
    template: PATHS.source + '/views/pages/catalog.pug',
    inject: true,
    data: {
        pages: require('./dev/util/options.json')
    }
})

JSON

"pages": {
    "catalog": {
        "title": "Catalog",
        "description": "",
        "keywords": ""
    }
}

Answer 1

每个页面都是一个单独的 pug 和 json。 首先，我声明条目，在我的例子中它是一个单独的 js 文件 entry.js

module.exports.html = {
     'index': 'index',
     'about': 'o-mnie',
     'contact': 'kontakt'
};

Webpack 部分

包括条目：

const entry = require('./entry.js');

接下来向 HtmlWebpackPlugin 添加条目：

const entryHtmlPlugins = Object.keys(entry.html).map(entryName => {
    return new HtmlWebpackPlugin({
        filename: `${entry.html[entryName]}.html`,
        template: `./source/templates/containers/${entryName}/${entryName}.pug`,
        chunks: [entryName],
        file: require(`../source/templates/containers/${entryName}/${entryName}.json`)
    })
});

查看完整代码如何使用 pug 和 webpack 中的 json 数据 -> github

const webpack = require("webpack");
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

const entry = require('./entry.js');

const entryHtmlPlugins = Object.keys(entry.html).map(entryName => {
    return new HtmlWebpackPlugin({
        filename: `${entry.html[entryName]}.html`,
        template: `./source/templates/containers/${entryName}/${entryName}.pug`,
        path: path.join(__dirname, "../dist/"),
        chunks: [entryName],
        // inject: true,
        // cache: true,
        file: require(`../source/templates/containers/${entryName}/${entryName}.json`),
        mode: 'development'
    })
});

const output = {
    path: path.resolve(__dirname, "source"),
    filename: "[name].[hash].js",
    publicPath: "/"
}

const config = {
    devtool: "eval-source-map",
    mode: "development",
    entry: entry.site,
    output: output,
    module: {
        rules: [
            {
                // JS
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                }
            },
            {
                // CSS | SCSS
                test: /\.(css|scss)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [require('autoprefixer')({
                                    'browsers': ['> 1%', 'last 2 versions']
                                })],
                            }
                        },
                        {
                            loader: 'sass-loader'
                        },
                        {
                            loader: 'sass-resources-loader', // style-resources-loader then we can use sass, less, stylus
                            options: {
                                resources: [
                                    path.resolve(__dirname, '../source/scss/main.scss')
                                ]
                            },
                        }
                    ]
                })
            },
            {
                // IMAGES
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file-loader"
            },
            {
                // PUG
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    pretty: true,
                    self: true
                }
            }
        ],
    },
    plugins: [
        new SimpleProgressWebpackPlugin({
            format: 'compact'
        }),
        new ExtractTextPlugin({
            filename: '[name].[hash].css',
            // disable: false,
            allChunks: true
        }),
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(false)
        }),
    ].concat(entryHtmlPlugins)
};

module.exports = config;