webpack dev serverでhtmlファイルにjavascriptエントリポイントを挿入しますか？

CSSがインラインでインジェクトされているのと同じように、JSエントリーポイントをwebpack devサーバーに挿入することは可能ですか？webpack dev serverでhtmlファイルにjavascriptエントリポイントを挿入しますか？

例えば、私のindex.htmlは次のとおりです。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>app</title> 
</head> 
<body> 
    <div id="app"></div> 
</body> 
</html>

しかし、私が見てみたいことは、私のWebPACKのdevのサーバーを実行した後、このようなものである（Iものの、CSSが自動的に注入されていることに注意js参照が表示されない）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>app</title> 
    <style>*,*:after,*:before{margin:0;padding:0}html{ /* .. all other styles */ }</style> 
</head> 
<body> 
    <div id="app"></div> 
    <script type="text/javascript" src="/js/app.js?1d8f26165af69413a6bb"></script> 
</body> 
</html>

これは可能ですか？

出典

2016-07-17 bitten

はい、可能です。あなたは使用する必要がありますHTML Webpack Plugin

このプラグインは、スクリプトタグを使用して本文内のすべてのWebpackバンドルを含むHTML5ファイルを生成します。次のようにちょうどあなたのWebPACKの設定にプラグインを追加します。

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var webpackConfig = { 
    entry: 'index.js', 
    output: { 
    path: 'dist', 
    filename: 'index_bundle.js' 
    }, 
    plugins: [new HtmlWebpackPlugin()] 
};

これは、次の含むファイルDIST/index.htmlをを生成します。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Webpack App</title> 
    </head> 
    <body> 
    <script src="index_bundle.js"></script> 
    </body> 
</html>

出典

2016-07-17 11:34:10

グレート、これは私がまさに必要です。 '

'が必要なので、テンプレートを使用してしまいました。ありがとう！ – bitten

webpack dev serverでhtmlファイルにjavascriptエントリポイントを挿入しますか？

答えて

関連する問題