web-dev-qa-db-ja.com

html-webpack-pluginを使用して部分的に含める方法はありますか？

Webpackを使用してスクリプトとHTMLをコンパイルしています（html-webpack-plugin）。問題は、同じパーツを含む5つのHTMLファイルがあり、これらのパーツを別の.htmlファイル、そしてincludeすべてのHTMLファイルのこれらの部分。このようにして、これらの小さなHTMLファイルを変更すると、これらの変更を表すためにすべてのHTMLファイルが再コンパイルされます。

Webpackはデフォルトで.jsファイルに対してこれを行いますが、HTMLファイルに対してそのようなものを使用できますか？

htmlwebpackfrontend
24
serge1peshcoff

テンプレートで<%= require('html!./partial.html') %>を使用できます。ここの例： https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html

27
mantastrunce

別のわずかに異なるソリューション。

interpolateオプションでhtml-loaderを使用します。

https://github.com/webpack-contrib/html-loader#interpolation

{ test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

そして、htmlページでは、partials htmlおよびjavascript変数をインポートできます。

<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
  <!-- Importing navbar -->
  ${require('./partials/nav.html')}
  <!-- Importing variable from javascript file -->
  <h1>${require('../js/html-variables.js').hello}</h1>
  <!-- Importing footer -->
  ${require('./partials/footer.html')}
</body>

html-variables.jsは次のようになります。

const hello = 'Hello!';
const bye = 'Bye!';

export {hello, bye}

唯一の欠点は、この<%= htmlWebpackPlugin.options.title %>のようにHtmlWebpackPluginから他の変数をインポートできないことです（少なくともそれらをインポートする方法が見つかりません）が、私にとっては問題ではありません。 htmlのタイトル、またはハンドル変数に別のjavascriptファイルを使用します。

9
pldg

HTML Webpackプラグインの一部 をチェックして、もう少しエレガントなものを探してください。 HTMLファイルをセットアップして、探しているものと同じようなファイルを含めることができます。

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/partials/body.html'
  })
]

また、ヘッドとボディ、オープンとクローズなど、追加する場所を構成でき、変数を渡すことができます。

2
Colby