Question

我正在使用Google地图api和webpack，要生成谷歌地图，它应该在加载API js文件之前加载包文件。但是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'
})

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

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

如何使用HtmlWebpackPlugin在身体代码之前注入bundle源？

1 个答案: