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

Question

我在 webpack 中使用 Google map api，要生成 google map，它应该在加载 API js 文件之前加载 bundle 文件。但是 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
    } };

console screenshot

Answer 1

试试这个：

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

inject: (true | 'head' | 'body' | false)
Inject all assets into the given template or templateContent - When passing true or 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element.

有关详细信息，请参阅 Configuration docs。

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

How can I inject bundle source before a code in body using HtmlWebpackPlugin?

javascript

google-maps

node.js

webpack

html-webpack-plugin