Webpack-dev-server not using the template in the HtmlWebpackPlugin options

Question

*Edit: Example (hopefully) made more clear.

I'm sure there's something simple here I've missed, but I can't see it...

I'm using one HtmlWebPlugin instance with a template per page/entry point. When I use webpack-dev-server only the first instance actually respects what's in the template, the rest just use simple html and meta tags

Writing the files to disk, either by using WriteFilePlugin with dev-server, or by simply building the files without dev-server, uses the template correctly. I'm stumped.

Expected: about.html/index.html This is what I get using both write-file-webpack-plugin and by just running 'webpack --config webpack.config.js'. Index.html is identical.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>About</p>
</body>
</html>

Actual output from Webpack-dev-server: (view page source)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8" src="/about.js"></script>
    </body>

</html>

Config:

webpack.config.js

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

module.exports = {
    entry: {
        index: './src/js/index.js',
        about: './src/js/about.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            }
        ]
    },
    devServer: {
        openPage: 'about'
    },
    plugins: [
        new WriteFilePlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.ejs',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            filename: 'about.html',
            template: 'src/about.ejs',
            chunks: ['about']
        }),
    ]
};

I can't see anything obviously wrong, but then I'm new to multiple pages and webpack

Thanks

**Edit: Given that the files written to disk are fine it feels like it might be a problem with where wds is serving files from or where I'm navigating to? localhost:8080 => html and script links are there. localhost:8080/index => script links but no html from the template. localhost:8080/about => script links but again no html from template.

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\Nick\Javascript\Webpack\test

Have you tried adding the plugins section of your webpack.common.js file into your webpack.dev.js file? How will your webpack dev server know to use the HtmlWebpackPlugin in the way you've specified if its not in your webpack devserver config? Try adding it into the webpack.dev.js file. — Seth Lutske
Hey Seth, thanks I'll give it a try, but doesn't webpack-merge create a single config out of webpack.common.js and webpack.dev.js? — NickW
Unfortunately hasn't fixed the problem. Pretty sure webpack.common.js is being combined into one config file with webpack.dev.js, as adding ` devServer: {openPage: 'admin' },` to the former opens the correct page, and index.html does use the correct template. Thanks for the reply though — NickW

ShinaBR2 ShinaBR2 · Accepted Answer · 2020-08-02T03:44:51

As a reference here: https://github.com/jaketrent/html-webpack-template/issues/69#issuecomment-376872044.

In short answer, you need LOOP to all chunks to insert into your final html file.

Below is example code in your template file

<% for (var chunk in htmlWebpackPlugin.files.js) { %>
    <script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script>
<% } %>

Hope this help, please feel free if I got misunderstanding.

Webpack-dev-server not using the template in the HtmlWebpackPlugin options

3 Answers