Webpack - ベースHTML（ベストプラクティス）で結果ファイルを要求する方法

Question

私はSPAのWebpackを使い始めたばかりで、質問があります。 HTMLに結果バンドル/ファイルを要求するにはどうすればよいですか？私はちょうど、タグを使用するか、これのためのより良い練習ですか？

Answer 1

HTML Webpack Pluginを使用して、すべてのJavaScriptおよびCSSバンドルを自動的に含めることができます。

例

あなたのプロジェクトディレクトリにnpm install html-webpack-plugin --save-devを実行するために必要なプラグインをインストールするには。

次の例では、プラグインはソースHTMLファイルを読み込んで、利用可能なCSSファイルをheadに自動的に追加し、末尾のすべてのJavaScriptバンドルをbodyの直前に追加します。それはExtractTextPluginとうまくいく。より多くのバンドルチャンクがあれば、適切に追加されます。

HTMLファイルの一部を動的に変更または生成する場合は、ボーナスとしてany templateエンジンを使用できます。箱の外でそれは他のvia loadersを使用する可能性のあるEJSテンプレートエンジンをサポートします。

var webpack = require("webpack"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './src/js/entry',     // Source JavaScript file 
    output: { 
     path: './bin/',      // Output directory 
     filename: "./js/bundle.js"    // Result JavaScript file 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/index.html',  // Source HTML file 
      filename: './index.html'   // Result HTML file 
     }), 
    ] 
}; 

それはHTML WebPACKのプラグインはは、を縮小化チャンクをフィルタリングし、キャッシュを防ぐために、URLへのファイルのハッシュを追加するなど、一緒にプレイするために、多くの機能を持っていることは注目に値します...あなたはそれらと、より多くを学ぶことができますdocumentationにあります。

Answer 2

私のスターターシードは、angle2 + webpackで見ることができます。すべてのファイルは（app.js、vendor.js、polyfills.js）+マップ

Link to webpack.config.js

Answer 3

ビルドディレクトリにあったのWebPACKは、モジュールバンドラです。 Webpackの設定に従って、SPA全体を1つまたは複数のjavascriptバンドルにバンドルします。これらのjsバンドルをHTMLコード内にインポートする必要があります。これらのものをHTMLに挿入する唯一の方法は、scriptタグを使用することです。だからあなたはあなたのhtmlでこのようにインポートします：

<script src="bundle.js"></script> 

はい、これはベストプラクティスです。