テンプレート内の動的変数を使用してhtmlWebpackPluginでnunjucksを使用する

WebpackコンパイルでhtmlWebpackPluginでNunjucksを使用してhtmlファイルを生成する方法を探しています。私はこれまでテンプレート内の動的変数を使用してhtmlWebpackPluginでnunjucksを使用する

は私が実際にnunjucks-html-loaderを通じてnunjucksテンプレートファイルからHTMLを生成するだけにVARSを送信せず、renderメソッドが呼び出されると、ローダのコードに少し近づい探しするために管理を実現何

テンプレート。動的に挿入されたが、私はテスト目的のために

を試してみました何

new HtmlWebpackPlugin({ 
    filename: path.join(__dirname, '/' + page.filename), 
    template: 'nunjucks-html-loader!assets/templates/' + page.name + '.njk' 
})

をvarsのなし

だから、今、次のプラグインの設定とのために、私はHTMLを生成し、私はnode_module自体にいくつかの変更を試してみました（私は...私が知っている、知っている）と

html = template.render(nunjucksContext);

を変更しましたしかし、私のwebpack.config.jsファイルにglobal.globalsを定義しようと

html = template.render(nunjucksContext, { globals: global.globals });

にこれは私の理解を超えている次のエラー

ERROR in Error: Child compilation failed: Module build failed: TypeError: parentFrame.push is not a function

でクラッシュ。

は、私が欲しいもの

は私が私が作るすべてのページレイアウトを拡張し、次の

<html> 
<!-- layout structure inherited from every template --> 
</html>

ように私のテンプレートを構築することができますnunjucksのような拡張テンプレートエンジンを使用することであり、一部だけを上書きします私は

を回避しようと何ブロック

それもです：私が作るすべてのページは、私の質問があるパーシャル

が含ま

<html> 

フッターファイル

 </html>

：exemple

ヘッダファイルのようなの
パーシャル可能なtuは、nunjucksのような継承をサポートするテンプレートエンジンを使用しますe htmlWebpackPluginを使用するか、またはexepleのためにejsのような別のものを使用して、私が好きではないパーシャルにレイアウトをチャンクすることは必須ですか？

出典

2017-11-16 3Dos

申し訳ありませんが、私はnunjucks-isomorphic-loaderで回避策を見つけましたが、それはまだサポートされていないようですが、まだあります。それは今のところ働きます！

は、ここで次のテンプレート

_layout.njk

{% set vars = htmlWebpackPlugin.options.myOptions %} 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>{{ vars.foo }}</title> 
    </head> 
    <body> 
    <header> 
    {% block header %} 
     <h1 class="header-logo"> 
     <a href="#">{{ vars.foo }}</a><!-- Outputs bar --> 
     </h1> 
    {% endblock %} 
    </header> 

    {% block content %} 

    {% endblock %} 
    </body> 
</html>

index.njk

{% extends "_layout.njk" %} 

{% block content %} 
here's the content of my `foo` var: {{ vars.foo }} 
{% endblock %}

を持つ私のWebPACKのコンフィグ

const path = require('path') 
const webpack = require('webpack') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 

const DEV_ENV = process.env.NODE_ENV === 'dev' 

const wpConfig = { 
    entry: './assets/js/app.js', 

    output: { 
    path: path.resolve('./dist/js'), 
    filename: 'bundle.js' 
    }, 

    module: { 
    rules: [ 
     // Javascript 
     { 
     test: /\.js$/, 
     exclude: /(node_modules)/, 
     use: { 
      loader: 'babel-loader' 
     } 
     }, 

     // Nunjucks - HTML 
     { 
     test: /\.njk$/, 
     use: [ 
      { 
      loader: 'nunjucks-isomorphic-loader', 
      query: { 
       root: [path.resolve(__dirname, 'assets/templates')] 
      } 
      } 
     ] 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.DefinePlugin({ 
     DEV_ENV: DEV_ENV 
    }), 

    new HtmlWebpackPlugin({ 
     myOptions: { foo: 'bar' }, 
     filename: path.join(__dirname, '/' + page.filename), 
     template: 'assets/templates/index.njk' 
    }) 
    ] 
} 

module.exports = wpConfig

です

出典

2017-11-17 09:30:18 3Dos

テンプレート内の動的変数を使用してhtmlWebpackPluginでnunjucksを使用する

答えて

関連する問題