Html-webpack-plugin: Webpack 2 Js file not added to the HEAD

Created on 5 Jul 2017 · 5Comments · Source: jantimon/html-webpack-plugin

Description

I have several entry points define in the webpack config file and using the files objects I specified where to place each file (either head or body).
The problem is that the .js file i want to add to the <head> section is added to the <body>.

Please see the configuration and the generated html file.

Config

const resolvedPaths = {
    app: path.join(__dirname, './desktop/app'),
    dist: path.resolve(__dirname, './desktop/dist')
};

path.resolve('./mydir')
module.exports = {
    context: resolvedPaths.app,
    entry: {
        'styles/styles': './styles/main.less',
        'scripts/before-start': './scripts/common/before-start.js',
        'scripts/main': './scripts/index.js',
        'scripts/vendor': './scripts/vendor.js',
        'scripts/ie': './scripts/ie.js',
    },
    output: {
        path: resolvedPaths.dist,
        filename: isProduction ?
            '[name].[chunkhash].js' : '[name].js',
        publicPath: '/',
        sourceMapFilename: isProduction ?
            '[name].[chunkhash].js.map' : '[name].js.map',
        chunkFilename: isProduction ?
            '[name].chunk.[chunkhash].js' : '[name].js',
    },
    .....

   new HtmlWebpackPlugin({
        template: 'index.html',
        'files': {
            'css': ['styles/styles.css'],
            'js': ['scripts/before-start.js', 'scripts/ie.js', 'scripts/vendor.js', 'scripts/main.js', 
                   'scripts/styles.js'],
            'chunks': {
                'head': {
                    'entry': 'scripts/before-start.js',
                    'css': ['styles/styles.css']
                },
                'main': {
                    'entry': ['scripts/ie.js', 'scripts/vendor.js', 'scripts/main.js', 'scripts/styles.js'],
                    'css': []
                },
            }
        },
        inject: true,
        minify: false,
    })

Copy your template file:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8; IE=7" />
<link href="/styles/styles.a76a4df069f84cfffe219d6eb907713f.css" rel="stylesheet"></head>

<body>
    <!-- Dashboard Views -->
    <div id="main-content" ng-show="!State.loading">
        <div id="region-content" class="content">
            <div class="main-view">
                <div ui-view="landing.auth" class="landing-page-auth"></div>
                <div ui-view="main.auth" class="main-auth"></div>
                <div ui-view="main.dashboard"></div>
                <div ui-view="main.abstract"></div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="/scripts/vendor.a44995d1a64cc4ee86c5.js"></script><script type="text/javascript" src="/scripts/main.d7e7696f79ebde92eda0.js"></script><script type="text/javascript" src="/scripts/ie.ac19c2d48dfbec21c636.js"></script><script type="text/javascript" src="/styles/styles.fc973f67cf4c42ec324b.js"></script><script type="text/javascript" src="/scripts/before-start.12be619a0428cec20169.js"></script>
</body>
</html>

Environment

Node.js v6.6.0
darwin 16.6.0 
5.0.4
[email protected]

Thank you!

Source

VPuscoci

Most helpful comment

Thanks @mastilver, but that will include all the .js files in the head, I only need the before-script.js file in the head.

VPuscoci on 5 Jul 2017

👍2

All 5 comments

use inject: 'head'

https://github.com/jantimon/html-webpack-plugin#configuration

mastilver on 5 Jul 2017

Thanks @mastilver, but that will include all the .js files in the head, I only need the before-script.js file in the head.

VPuscoci on 5 Jul 2017

👍2

We are not sure yet if we should have an options, we might in the future but there is not plan to add it
The only options you have is to use a custom template

mastilver on 5 Jul 2017

😕2

Thanks for the reply, now I dont think its needed. I added all scripts to head and I used a plugin to add asyns and defer as needed.

VPuscoci on 6 Jul 2017

👍1

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.