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

【问题标题】：How can I inject bundle source before a code in body using HtmlWebpackPlugin?如何使用 HtmlWebpackPlugin 在正文中的代码之前注入包源？
【发布时间】：2017-06-15 00:53:07
【问题描述】：

我正在使用带有 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
    } };

console screenshot

【问题讨论】：

标签： javascript node.js google-maps webpack html-webpack-plugin

【解决方案1】：

试试这个：

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

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

更多详情请见Configuration docs。

【讨论】：