将.json文件从html-webpack-plugin传递到把手模板 [英] Pass .json file from html-webpack-plugin to handlebars template

问题描述

是否可以通过html-webpack-plugin加载.json文件并将其传递到我的车把文件?

Is it possible to load a .json file via html-webpack-plugin and pass it to my handlebar files?

我当前的设置

const path = require('path');
const fs = require('fs');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

const extractCss = new ExtractTextPlugin({
  filename: './css/app.css'
});

const pages =  fs
    .readdirSync(path.resolve(__dirname, 'src/hbs/pages'))
    .filter(fileName => fileName.endsWith('.hbs'));

module.exports  = {
        context: path.resolve(__dirname, "src"),
        entry: './js/main.js',
        output: {
            path: path.resolve(__dirname, './build'),
            filename: 'js/app.js',
        },
        ...
        ...
        plugins: [
            new CleanWebpackPlugin(['build']),
            extractCss,
            ...pages.map(page => new HtmlWebpackPlugin({
                 template: 'hbs/pages/'+page,
                 filename: page
            }))
        ],

        module: {
            rules: [
                //babel-loader
                {
                    test: /\.js$/,
                    include: /src/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ['env']
                        }
                    }
                },
                ...
                ...
                //handlebars-loader
                {
                    test: /\.(hbs)$/,
                    loader: "handlebars-loader",
                    query: {
                        helperDirs: [
                            __dirname + "/hbs/helpers"
                        ]
                    }
                }
            ]
        }
};

我希望有一个包含list1.json，list2.json ...这样的文件的文件夹，这将非常庞大，这样我就不会弄乱我的.hbs文件.

I want to have a folder with files like list1.json, list2.json... which will be very huge, so that i dont mess up my .hbs file.

类似

...pages.map(page => new HtmlWebpackPlugin({
    template: 'hbs/pages/'+page,
    filename: page,
    data: myData.json
}))

会很棒

欢呼声，gregor;)

cheers, gregor ;)

推荐答案

您可以使用html-webpack-plugin的templateParameters选项:

you can use html-webpack-plugin's templateParameters option:

new HtmlWebpackPlugin({
  templateParameters:require('path/to/data.json')
}),

templateParameters:允许覆盖模板中使用的参数

templateParameters: Allows to overwrite the parameters used in the template

这篇关于将.json文件从html-webpack-plugin传递到把手模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！