如何在使用HtmlWebpackPlugin的正文代码之前注入bundle source？

我正在使用谷歌地图API与webpack，要生成谷歌地图，它应该加载API文件之前加载包文件。 但是HtmlWebpackPlugin把bundle文件放在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 } }; 

控制台截图

Answer 1

尝试这个：

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

注入：（ true | 'head' | 'body' | false ）
注入所有资产到给定的模板或templateContent – 当传递true或'body'时，所有的javascript资源将被放置在body元素的底部。 'head'将脚本放在head元素中。

有关详细信息，请参阅configuration文档 。