webpack-dev-server: pages require access with .html about pug-loader HOT 7 CLOSED

I see. Thanks so much for all of your help!

from pug-loader.

Hello @mjlbach,

Thank You for the reporting of the issue.
I try to reproduce it.

P.S. You could greatly speed up the solution of the problem if you created a small repo with a reproducible issue.

from pug-loader.

@mjlbach

I will help you but I can't reproduce an issue.

I have created the example simple multiple pages.

Can you please create a small repo based on this example to reproduce a problem.

Describe please:

• Current behaviour
• Expected behaviour

Clarification

Entry

The key of the entry object is the output filename (without .html extension) relative to output.path.
For details see entry-syntax.

entry: {
    index: './src/app/home/index.pug', // output ./dist/index.html
    people: './src/app/people/index.pug', // output ./dist/people.html
    
    // output a generated HTML file to sub directory
    'pages/research': './src/app/research/index.pug', // output ./dist/pages/research.html
},

Output

output: {
    filename: 'app/[name].bundle.js', // don't define it here, this is the same as Plugin option `js.filename`
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'auto' // default is always `auto`, can be omited
},

file-loader

Note: the file-loader is deprecated and in Webpack 5 is replaced with asset/resource, see the asset-modules.
Use the asset module asset/resource:

     {
        test: /font-awesome\/.+\/.+\.(eot|svg|ttf|otf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          // output filename of fonts
          filename: 'assets/fonts/[name][ext][query]',
        },
      }

from pug-loader.

Thank you so much for the repro and the proactive suggestions on cleaning up our config! It was a hard migration with the webpack upgrades as well haha.

When I use your repo, I can reproduce the problem:

with npm start

with npm run build && cd dist && npx serve

Then apply this patch:

diff --git a/examples/simple-multipage/src/views/home/index.pug b/examples/simple-multipage/src/views/home/index.pug
index c9c34ac..fcc7b21 100644
--- a/examples/simple-multipage/src/views/home/index.pug
+++ b/examples/simple-multipage/src/views/home/index.pug
@@ -9,7 +9,7 @@ html
 body
   h1 Home
   div.nav
-    a(href="about.html") About
+    a(href="about") About
     span &nbsp|&nbsp
-    a(href="contact.html") Contact
+    a(href="contact") Contact
   img(src=require('Images/apple.png') alt="apple")

with npm start

with npm build && cd dist && npx serve

from pug-loader.

@mjlbach

ah, now I understand your problem.

According to the Web Standards Specification:

• the URL with end .html is a static HTML file
• the URL with end / or without .html is a web path (directory), where must be the index.html file

If you need to have a URL as a web path (without .html), then change in the Webpack entry:

entry: {
    // define URL: https://example.com (real URL: https://example.com/index.html)
    index: 'src/views/home/index.pug', // => dist/index.html

    // define URL: https://example.com/contact.html
    contact: 'src/views/contact/index.pug', // => dist/contact.html

    // define URL: https://example.com/about (real URL: https://example.com/about/index.html)
    'about/index': 'src/views/about/index.pug', // => dist/about/index.html
},

from pug-loader.

Ah I had tried this before and thought it was a hack! Good to hear this is the recommended solution :)

I was confused because when I build/serve the site with cloudflare (and npx serve) it still works without changing the above, and with our previous setup (using html-webpack-plugin) webpack-dev-server it also worked. Do you know what might have changed?

from pug-loader.

@mjlbach

It was a "magic" of a web-server (cloudfare has non-standard configuration to allow more flexibility).
Just follow Web Standards to avoid unexpected problems ;-)

from pug-loader.