Automatic "publicPath"

[kumardeepakme]

Why is output.publicPath: 'auto' not supported?

When are you planning to role this feature?

[webdiscus]

@kumardeepakxyz

Why is output.publicPath: 'auto' not supported?

Already in development...

[kumardeepakme]

okay,

So how can I resolve the problem of 404 when deploying the website to a sub directory with output.publicPath = '/'

output.publicPath = '/' meaning it can find the files in the server root, so when website is on the root everything is fine, but once its moved to a sub directory, its link to css, js, images etc. are broken as they still refer to the server root.

I have tried
output.publicPath = '' - it fails to load SCSS URL Images
output.publicPath = './' - it also fails to load SCSS URL Images

OUTPUT OF URL RESOLVE
/path/to/assets...

EXPECTED OUTPUT
path/to/assets...
/ should be somehow eliminated.

[webdiscus]

but once its moved to a sub directory, its link to css, js, images etc. are broken as they still refer to the server root

yes of cause will be broken, because you must then change paths. How otherwise should it work?

To avoid the paths problem you can use Webpack aliases:
webpack.config.js

module.exports = {
  resolve: {
    alias: {
      Images: path.join(__dirname, 'path/to/src/images/'),
    },
  },
},

use alias Images in Pug:

img(src=require('Images/logo.png'))

use alias Images in SCSS:

.my-logo {
  background-image: url('Images/logo.png');
}

Then Webpack self copy resources form source path into publicPath and in code will be correct output public path.
Avoid mishmash with relative '' and absolute '/' publicPath, it can confuse yourself ;-)

[kumardeepakme]

@webdiscus

I do use alias & my assets are loading perfectly fine.

Loading of assets is not the problem.

The issue I'm trying to highlight is, when PUG template is rendered to HTML, all the assets (JS, CSS, IMAGES, BG IMAGES...) all have relative path pointing from root folder due to output.publicPath = '/' which should not be the case.

Assets should have relative path from the same directory as assets/... not /assets/....

Eg.
❌ NOT

<img src="/assets/images/1.jpg">
<!-- root relative /1.jpg -->

✅ SHOULD BE

<img src="assets/images/1.jpg">
<!-- fully relative 1.jpg or ./1.jpg -->

Automatic "publicPath" is perfectly handled in HTMLWebpackPlugin. I assume why you can't provide that feature.

Atleast there should be workaround with pug-plugin so that path of assets is relative to its file.

[webdiscus]

How do you highlighting, on client-side?
The PugPlugin.loader can highlight at compilation stage (server-side). Try to use :highlight filter for code or :markdown filter to highlight code in markdown

[webdiscus]

@kumardeepakxyz

I'm developing to add support for the auto publicPath. It's really useful feature.

[webdiscus]

@kumardeepakxyz

I have added the auto publicPath in new version 3.0.1.
Please see the release details in the changelog.

[kumardeepakme]

that is great!

I just tested it and it works like a charm 👍

Hope this discussion was worth your time and efforts.

[webdiscus]

Thanks for the feature request and constructive discussion.
Now I self use the auto public path. It is very useful in some use cases.

Note
Using auto public path require additional compilation time. Use it only where is need, not overall.