HTML webpack Plugin does not run

  html, html-webpack-plugin, javascript, node.js, webpack

I followed the guide here, and updated it to work with a more recent version of node/webpack etc.

This means my webpack looks like this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'test',
            template: 'src/index.html',
            inject: "head"
        }),
    ],
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                include: /src/,
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.(gif|jpeg|jpg|png|svg|webp)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: '[path]/[name].[ext]',
                            include: [/images/]
                        }
                    }
                ]
            },
        ]
    }
};

My index.html is:

<!doctype html>
<html dir="ltr" lang="en">

<head>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title>Aligment Charts</title>

</head>

<body>
    <canvas id="chart"></canvas>
</body>

</html>

folder structure of this project. dist folder, with index.html and main.js. src folder with index.html and index.js

however when I run the build command, I do not get anything injected into dist/index.html.

This is what I see in the devtools:

<html dir="ltr" lang="en"><script type="text/javascript">window["_gaUserPrefs"] = { ioo : function() { return true; } }</script><head>

    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Aligment Charts</title>

<style>@media print {#ghostery-tracker-tally {display:none !important}}</style></head>

<body>
    <canvas id="chart"></canvas>


</body></html>

scripts in package.json:

 "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "prebuild": "del-cli dist -f",
    "dev": "webpack --mode=development --watch",
    "build": "npm run prebuild -s && webpack --mode=production"
  },

What I have done to test this is, run cd .. && npm i && npm run build && cd src/ && http-server and check http://localhost:8080/.

Where have I gone wrong in getting the main.js injected as a script tag? From what I can see here, there’s nothing obvious I’ve missed.

Source: Ask Javascript Questions

LEAVE A COMMENT