HtmlWebpackPluginを使用してコードの前にバンドルソースを挿入するにはどうすればよいですか？

Question

私はwebpackでGoogle map apiを使用しています。Googleマップを生成するには、API jsファイルをロードする前にバンドルファイルをロードする必要があります。 HtmlWebpackPluginはバンドルファイルをbody要素の一番下に置きます。バンドルファイルの前にバンドルをロードするにはどうすればよいですか？これは私の下のwebpack.config.jsです。

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

module.exports = { 
    entry: ['webpack/hot/dev-server',"./public/entry.js"], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: "bundle-[hash].js", 
     publicPath: path.resolve(__dirname, '/') 
    }, 
    devServer: { 
     hot: true, 
     inline: true 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { test: /\.jade$/, loader: "pug-loader"} 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery', 
     }), 
     new HtmlWebpackPlugin({ 
      template: './views/index.jade', 
     }) 
    ], 
    devServer: { 
     historyApiFallback: true 
    } }; 

console screenshot

Answer 1

このお試しください：

new HtmlWebpackPlugin({ 
    template: './views/index.jade', 
    inject: 'body' 
}) 

注入：（true | false'head' | | 'body'）指定されたテンプレートまたはtemplateContentに
注入するすべての資産を - 真を渡すときまたは 'body'のすべてのjavascriptリソースが下に配置されますo fボディ要素。 'head'はhead要素にスクリプトを配置します。

詳細については、Configuration docsを参照してください。