Unexpected troubles with output.publicPath about pug-plugin HOT 20 CLOSED

Hello @ladown,

thanks for issue report.
I will fix it.

from pug-plugin.

I am sorry, that it takes so much time to figure it out.
Thank you for your work and new interesting bugs in my repo.
Look forward for new features in your plugin :)

from pug-plugin.

Yep, thank you. Have a nice night

from pug-plugin.

@ladown

I have cloned your repo.
On my MacBook M1 the install npm i is terminated with gcc error by compilation one of image plugin. I have removed all image-* plugins from package.json and disabled in Webpack config to able to start the npm run dev. I see a page with dark background and some text.

How to reproduce the issue

Set the output.publicPath: './', start dev => in browser I see Cannot GET /page-list.html and in browser console is the error:

Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:8083/favicon.ico ("default-src"). FaviconLoader.jsm:180:19

Is that what you mean by "Unexpected Trouble"?

If yes, then:

1. this is problem of the FaviconLoader
2. the ./ (relative local path) is invalid web route, in this case the correct publicPath should be empty string: publicPath: ''
3. using publicPath: '' it works.

from pug-plugin.

The command npm run build use the webpack.prod.js config where the splitChunks and runtimeChunk options are defined, therefore were generated chunks (runtime,vendors, app).

from pug-plugin.

@ladown

I have cloned your repo. On my MacBook M1 the install npm i is terminated with gcc error by compilation one of image plugin. I have removed all image-* plugins from package.json and disabled in Webpack config to able to start the npm run dev. I see a page with dark background and some text.

How to reproduce the issue

Set the output.publicPath: './', start dev => in browser I see Cannot GET /page-list.html and in browser console is the error:

Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:8083/favicon.ico ("default-src"). FaviconLoader.jsm:180:19

Is that what you mean by "Unexpected Trouble"?

If yes, then:

1. this is problem of the FaviconLoader
2. the ./ (relative local path) is invalid web route, in this case the correct publicPath should be empty string: publicPath: ''
3. using publicPath: '' it works.

Not at all.

Let's try to figure out why did you have such unusual behavior, when you tried to install dependencies and run dev. Usually I use yarn. I tried again copy repo, install dependencies and run dev script with yarn and i successfully did it. My project run with output.publicPath: 'auto';
Let's try to use npm for install dependencies and run dev mode. I did it as well. It works correctly.
Unexpected i caught a error with output.publicPath: './' - "Failed to load resource: the server responded with a status of 404 (Not Found)". I didn't get it before. But there is nothing in console about Favicon Loader, which i don't have.
I tried to install previous versions of your plugin and it didn't work as well.
But i had another project with this repo and [email protected] and it works with output.publicPath: './' without mistakes.
I don't know what happening.

from pug-plugin.

The command npm run build use the webpack.prod.js config where the splitChunks and runtimeChunk options are defined, therefore were generated chunks (runtime,vendors, app).

Yep, but i caught this error in dev mode.

from pug-plugin.

So I tried installing the image-* plugins one by one and found that two plugins could not be installed on M1:

"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",

Error by compilation: spawn Unknown system error -86.

I have enabled the const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); in Webpack config, but two other plugins must be disabled:

// ['jpegtran', { progressive: true, quality: 'hight' }],
// ['optipng', { optimizationLevel: 5, quality: [0.7, 1] }],

But ok, not matter.

from pug-plugin.

An interesting find, because i have MacBook Air m1 as well and this errors did not appear

from pug-plugin.

I have deleted node_modules, *.lock files, tried install via yarn => error:

Output:
spawn Unknown system error -86
optipng pre-build test failed
compiling from source
Error: Command failed: /bin/sh -c make install

I have MacBook Pro M1 Max, Ventura 13.1.

from pug-plugin.

I have the same spec.
It's a magic.
I'm not really qualified in this question , but can the problem be in cache?

from pug-plugin.

npm run dev with publicPath: 'auto' => compiled successfully

The generated page-list.html (in firefox):

<head>
  ...
  <link rel="icon" href="img/favicons/favicon.7a5438bf.svg" type="image/svg+xml" sizes="any">
  <style>inlined CSS</style>
</head>
...

npm run dev with publicPath: './' => compiled successfully

Opened page (in Safari)

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Error</title>
</head>
<body>
  <pre>Cannot GET /page-list.html</pre>
</body>
</html>

Yes, I can reproduce the issue :-)
I will try to fix it.

from pug-plugin.

I'm interested in figuring out the solution.
Also, I tried the v4.8.0 and v4.9.0 pug-plugin. Same result, with publicPath: './' won't to open the page in browser.
It looks like the problem is in the ./ path. It is not valid publicPath.
See please the valid examples of publicPath.

module.exports = {
  //...
  output: {
    // One of the below
    publicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.
    publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
    publicPath: '/assets/', // server-relative
    publicPath: 'assets/', // relative to HTML page
    publicPath: '../assets/', // relative to HTML page
    publicPath: '', // relative to HTML page (same directory)
  },
};

You can use the relative path as empty string publicPath: '' or publicPath: '../assets/', but not ./.

from pug-plugin.

So, I have added the devServer: {...} options from webpack.dev.js into webpack.prod.js and changed the open: '/index.html', option.
Add the script into package.json:

"start:prod": "webpack serve -c webpack/webpack.prod.js --env build",

Run your production config with HRM:

npm run start:prod

I tried to change the index.pug and app.js, all changes were recompiled and live reloaded in browser.
It's work :-)

from pug-plugin.

Somehow i ran project with output.publicPath: './' and found chunks. I think webpack works not properly and doesn't throw errors.
So, i will not use such output.public Path, but i have a question. In docs to your plugin there is a mention, that output.publicPath: 'auto' slows compilation. Is output.publicPath work slow as well?

from pug-plugin.

Theoretically, yes, it works slower, because, a function will be called to resolve auto publicPath.
But how slow? It might take 10ms more.

If you build static sites for a host, is enough to set the output.publicPath as root / path.
If you want open generated HTML files from local directory, then use the output.publicPath as auto.

from pug-plugin.

I am sorry.
I am a little bit tired, thats why asked wrong question. Is there any difference for performance between output.publicPath: 'auto' and output.publicPath: ' '?

from pug-plugin.

Now I measured the performance of a project with 30 pages.
Compiled in 8187 ms ('/') vs 8195 ms (auto), also no difference.

But, if you has 100 pages with 1000 resources (images, styles, scripts, fonts, etc), then theoretically there may be a difference, but not significant.

from pug-plugin.

Okay, I see. Thank you for your replies and work !)

from pug-plugin.

Can be closed the issue?
For other questions/issuers you can open new issue.

from pug-plugin.