html-webpack-pluginを使用してテンプレートにデータを挿入できません

このローダーを使用してカスタムデータを.htmlテンプレートに挿入しようとしましたが、成功しませんでした。私たちは資産をうまく構築して注入することができましたが、動的データを渡す機能は機能しませんでした。このレポで提供されているサンプルを見ると、options.titleがどのようにテンプレートに渡されるのか分かりません。html-webpack-pluginを使用してテンプレートにデータを挿入できません

私はこのプラグインと非常に簡単です。このスターターキットを、使用しています：ここでhttps://github.com/AngularClass/NG6-starter

は、関連する依存関係のバージョンです：

"webpack": "^2.2.1" 
"html-webpack-plugin": "^2.29.0"

はwebpack.configから関連するセクションをコピーします。 JS：

module.exports = { 
    devtool: 'source-map', 
    entry: { 
    app: [ 
     'babel-polyfill', 
     path.join(__dirname, 'client', 'app/app.js') 
    ] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate-loader!babel-loader' }, 
     { test: /\.html$/, loader: 'raw-loader' }, // have also tried with the html-loader 
     { test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' } 
    ] 
    }, 
    plugins: [ 
    // Injects bundles in your index.html instead of wiring all manually. 
    // It also adds hash to all injected assets so we don't have problems 
    // with cache purging during deployment. 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html', 
     // inject: 'body', 
     // hash: true, 
     title: 'TEST!!!!!!!!!!!', 
     options: { 
     title: "TEST!!!!!!!!!!!!!*" 
     }, 
     chunks: ['vendor', 'app'] 
    }), 

    // Automatically move all modules defined outside of application directory to vendor bundle. 
    // If you are using more complicated project structure, consider to specify common chunks manually. 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     minChunks: module => /node_modules/.test(module.resource) 
    }) 
    ] 
};

テンプレートファイル

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="description" content="NG6-Starter by @AngularClass"> 
    <link rel="icon" href="data:;base64,iVBORw0KGgo="> 
    <base href="/"> 
    </head> 
    <body ng-app="app" ng-strict-di ng-cloak> 


    <%= htmlWebpackPlugin.options.title %> 

    <%= htmlWebpackPlugin.title %> 

    <%= title %> 

    <%= '\<\%\= htmlWebpackPlugin.title \%\>' %> 

    <%= '\<\%\= htmlWebpackPlugin.options \%\>' %> 

    </body> 
</html>

出典

2017-07-20 Detuned

ので、問題はhtmlかrawローダーが.htmlファイルのすべての制御を取っているということなので、html-webpack-pluginは、それが必要なものを行うことができませんでした。必要な場合はrawまたはhtmlのローダーポイントをすべて持ちますが、html-webpack-pluginに渡されたtemplateファイルを除外する必要があります。

参考：私もこれを試してみましたが、 `EJS-loader`を追加したhttps://github.com/jantimon/html-webpack-plugin/issues/747#issuecomment-316804313

出典

2017-07-20 20:12:13 Detuned

正しいオプションは次のとおりです。これはEJS構文です

<%= htmlWebpackPlugin.options.title %>

。式を評価し、その結果をHTMLに置きます。それはそれはとても似<head>にする必要があります意味：あなたは.htmlファイルに使用されるようにraw-loaderを設定したので、

<title><%= htmlWebpackPlugin.options.title %></title>

テンプレートが機能していない理由を、です。つまり、テンプレートはHTMLファイルとして扱われます。 html-webpack-pluginフォールバックejsローダー。指定されたファイルに対してローダーが設定されていない場合にのみ使用されます。ローダーと競合しないように、.htmlの代わりに.ejsをテンプレートとして使用することをお勧めします。その他のソリューション（たとえば、別のテンプレートエンジンを使用する場合など）については、The template optionも参照してください。

名前の変更client/index.html〜client/index.ejs

new HtmlWebpackPlugin({ 
    template: 'client/index.ejs', 
    // inject: 'body', 
    // hash: true, 
    title: 'TEST!!!!!!!!!!!', 
    chunks: ['vendor', 'app'] 
}),

は、あなたがリンクされ、リポジトリには多くのもの（例えばwebpackとhtml-webpack-plugin）の古いバージョンを使用し、html-webpack-pluginのバージョンは、上記の構成では動作しないことが表示されます。あなたがそれをアップグレードする必要があります。

npm install --save-dev [email protected]

出典

2017-07-20 19:32:52

。それはまだ同じ試練だった。上記で提供したスターターキットで作業することができれば、あなたは悪いことになるでしょう – Detuned

'html-webpack-plugin'は時代遅れで動作しませんでした。それをアップグレードすると、うまく動作します。 –

それは残念ながら問題ではありませんでした。これは 'html-webpack-plugin'がローダーと組み合わせてファイルをどのように扱うのかの問題であった。私は必要な修正へのリンクを掲載しました... – Detuned

html-webpack-pluginを使用してテンプレートにデータを挿入できません

答えて

関連する問題