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
– Seth Lutske, Commented Jul 30, 2020 at 15:22
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
– NickW, Commented Jul 30, 2020 at 15:38
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
– NickW, Commented Jul 30, 2020 at 16:07

NickW · Accepted Answer · 2020-08-02 07:59:41Z

2

Well, I might as well post my shame as the answer in case it helps anyone else in the future...

I was navigating to localhost:8080/about rather than localhost:8080/about.html.

The script was injected at /about, but the template wasn't. At /about.html both the script and template were used. I'm not sure why there's a difference there, but that was my problem!

answered Aug 2, 2020 at 7:59

NickW

1,3632 gold badges22 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ShinaBR2 Over a year ago

See. When you go to /about, web server looks for /about/index.html by defaul, it NOT AUTOMATICALLY appends html file name into your path. That's it..

NickW Over a year ago

Isn't it weird that /about even exists then? If I navigate to /bout, for example, there isn't a route at all. But yeah, really nice to have found it!

ShinaBR2 Over a year ago

With web server, whenever you don't specify the file name, it should be treat as a folder.

Piyush Patel · Accepted Answer · 2020-08-02 05:57:13Z

1

I think you are missing a loader there check https://www.npmjs.com/package/ejs-webpack-loader

I found an example in the package page with HtmlWebpackPlugin, try it maybe it will help you

plugin: {
  new HtmlWebpackPlugin({
    template: '!!ejs-webpack-loader!src/index.ejs'
  })
}

answered Aug 2, 2020 at 5:57

Piyush Patel

1,24015 silver badges19 bronze badges

1 Comment

NickW Over a year ago

Nice idea but unfortunately it hasn't worked. Also, it works fine when writing the files to disk, so it feels like maybe it's an issue with dev-server and where or how it's serving files? I mentioned above that it works fine for localhost:8080, but not localhost:8080/index or localhost:8080/about, despite the javascript being injected for the latter 2 urls. Seems odd

ShinaBR2 · Accepted Answer · 2020-08-02 03:44:51Z

0

+200

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.

answered Aug 2, 2020 at 3:44

ShinaBR2

2,7253 gold badges16 silver badges28 bronze badges

7 Comments

NickW Over a year ago

Hi Shina - The scripts/css and html are inserted correctly when I build the file though. It's when I use webpack-dev-server that they aren't. That seems like a slightly different problem to the one you linked? I'll definitely give it a try though as it might change dev-server's behaviour, thanks.

NickW Over a year ago

Same behaviour unfortunately.

ShinaBR2 Over a year ago

Can you give me webpack version info?

NickW Over a year ago

webpack 4.44.0. Have also rewritten/cut down the example to make it more clear

NickW Over a year ago

Also I've noticed that webpack-dev-server injects the html when at localhost:port, but not at localhost:port/index (or /about). Relevant js scripts are injected either way. Not sure if that gives an idea of what's happening?

|

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related