Html Webpack Plugin - ヘッダー/フッターのHTMLパーシャルを本体テンプレートにインポートする方法

コンパイル時にグローバルヘッダーとフッターがindex.htmlファイルに読み込まれるようにする方法を見つけようとしています私は毎回これを追加する必要はありません。Html Webpack Plugin - ヘッダー/フッターのHTMLパーシャルを本体テンプレートにインポートする方法

new HtmlWebpackPlugin({ 
     title: 'Typescript Webpack Starter', 
     template: '!!ejs-loader!src/index.html' 
    }),

それが体内にJSをロードし、ヘッドの罰金で、CSSが、私はのような何かを行うことができます場合、私は思ったんだけど：

は、現時点ではこれが私のindex.htmlファイルを作成するものです

<body> 
     {{HEADER GETS IMPORTED HERE}} 
     <p>Success your page has loaded</p> 
     <button class="button">Button</button> 
     {{FOOTER GETS IMPORTED HERE}} 
    </body>

（単にテンプレートエンジンたいと思います）、以下の私は、公式documentあたりのようにお考え

出典

2017-01-20 Max Lynn

を知ってみましょう：あなたが達成することができますです。

既にテンプレートローダーがある場合は、テンプレートを解析するために使用できます。これはhtml-loaderを指定し、.htmlファイルをテンプレートとして使用する場合にも発生します。

module: { 
    loaders: [ 
    { test: /\.hbs$/, loader: "handlebars" } 
    ] 
}, 
plugins: [ 
    new HtmlWebpackPlugin({ 
    title: 'Custom template using Handlebars', 
    template: 'my-index.hbs' 
    }) 
]

出典

2017-01-20 14:49:22 Ravi

実際のテンプレートエンジンを使用することをお勧めしますか？私は何とかwebpackを使ってこれを行う方法があると思いました：O –

それでは、それは方法ではありません。 WebpackはJavaScriptを理解しています。だから私たちはそれらのための異なるローダーを持っているし、多くのプラグインは、望ましい出力を達成する。あなたの場合、「ハンドルバー」ローダーをインストールし、それに「HtmlWebpackPlugin」を設定する必要があります。 – Ravi

クール私は週末にお越しいただきます。 –

Html Webpack Plugin - ヘッダー/フッターのHTMLパーシャルを本体テンプレートにインポートする方法

答えて

関連する問題