javascript - 如何使用 HtmlWebpackPlugin 在正文中的代码之前注入包源？

Question

我正在使用带有 webpack 的谷歌地图 api，要生成谷歌地图，它应该在加载 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
    } };

控制台截图

Answer 1

尝试这个：

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

inject: ( true| 'head'| 'body'| false)
将所有资产注入给定的模板或 templateContent - 当传递 true 或 'body' 时，所有 javascript 资源将被放置在 body 元素的底部。'head' 会将脚本放置在 head 元素中。

有关更多详细信息，请参阅配置文档。