FIle added to body

[afilp]

Hi!

This did not work for me. All scripts were added to body, even the "_head" one.

This is what I have:

module.exports = {
    entry: {
        vendor: [
            'lodash'
        ],
        index: path.join(dirApp, 'index'),
        index_head: path.join(dirApp, 'index_head'),
    },
    resolve: {
        modules: [
            dirNode,
            dirApp,
            dirAssets
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            IS_DEV: IS_DEV
        }),

        new HtmlWebpackPlugin({
            template: path.join(__dirname, '../index-webpack-source.php'),
            filename: '../index.php',
            chunks: ["vendor", "index", "index_head"]
            //             title: appHtmlTitle
        })
    ],
    module: {
        rules: [
            // BABEL
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                options: {
                    compact: true
                }
            },

            // STYLES
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: IS_DEV
                        }
                    },
                ]
            },

            // CSS / SASS
            {
                test: /\.scss/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: IS_DEV
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: IS_DEV,
                            includePaths: [dirAssets]
                        }
                    }
                ]
            },

            // IMAGES
            {
                test: /\.(jpe?g|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }
        ]
    }
}

[afilp]

Note: I moved the index_head js to the head and I see that that next time I do npm run build it is removed from there and gets again down to the body part, along with the other scripts.

[thearchitgarg]

Which version of html-webpack-plugin are you using?

[afilp]

@thearchitgarg "html-webpack-plugin": "3.2.0" Thanks!

[thearchitgarg]

@afilp As I can see in your code, you have not used HtmlWebpackInjectorPlugin in you plugins array.

Import this way-

const HtmlWebpackInjector = require('html-webpack-injector');

Then use this way -

plugins: [
        new webpack.DefinePlugin({
            IS_DEV: IS_DEV
        }),

        new HtmlWebpackPlugin({
            template: path.join(__dirname, '../index-webpack-source.php'),
            filename: '../index.php',
            chunks: ["vendor", "index", "index_head"]
            //             title: appHtmlTitle
        }),
                new HtmlWebpackInjector()     // Add this line
    ],

[afilp]

@thearchitgarg

Thanks! I did this and now I get this error:

TypeError: HtmlWebpackPlugin.getHooks is not a function

Any idea why? I see that htmlwebpack does not have this function inside it.

[thearchitgarg]

Initially we had: v1.0.3 which supported HtmlWebpackPlugin v3.2.0 and v1.0.6 which supported HtmlWebpackPlugin 4.0.0-beta.5 Now, I published a new version v1.0.6 which supports both versions.

So changing the HtmlWebpackInjector plugin to 1.0.6 will solve the issue.

[afilp]

Works, thanks!