Html-webpack-plugin: overriding publicPath (or, how to set the path for scripts when app is not at server root)?

[tconroy]

I have a base, dev and dist webpack config. dev and dist extend base with some custom setup for developing locally vs. deploying to our server. When I run dist it bundles all my code into a folder with the following structure:

dist/
    assets/
        app.js
        vendors.js
    index.html
    favicon.ico

the scripts in index.html get the following structure:

<script type="text/javascript" src="/assets/vendors.js?4aaf64703d2dfe86cedc"></script>
  <script type="text/javascript" src="/assets/app.js?4aaf64703d2dfe86cedc"></script>

... which is fine when I am developing locally, as the project exists at the "root" of my local server, however the project lives in a deeply nested sub directory on my server -- /assets/ maps to the root /assets/ directory, when I really need it to be more like assets/vendors.js or even ./assets/vendors.js

Is there a way I can specify this for this plugin? I believe it would require overriding publicPath. Not sure if that's doable/possible.

[jantimon]

wouldn't that be solved with a correct public path? (a relative one)

[ankurp]

@tconroy were you able to solve this?

[pospi]

I don't think this use-case is solveable with the current version. The plugin needs to prefix the rendered asset tags with a server-relative path if it's to work for an isomorphic site - typically one would configure their server to rewrite all requests to the main index file and have it process and render potential 404s using an isomorphic routing library like react-router.

+1

[jantimon]

Sorry could you try to explain in detail why this can't be solved with configuring a correct publicPath in webpack?

[jantimon]

I am open to add such a feature but I just want to make sure it's not just a work around for people who didn't understand webpacks output options ;)

[tconroy]

@jantimon there is a possibility this error is on my end, as I am still relatively new to webpack. In my test having it relative created the opposite issue (the dist build was ok but dev-server could not find the files). I've since moved to a new project, but will try and recreate a minimal example to showcase my use case.

Thanks!

[tomshen]

@jantimon publicPath is applied to both href/src for <link>/<script> and for url() in CSS. If you specify a relative publicPath (e.g. assets/), then the url()s in CSS files will be incorrectly rewritten (foo.png to assets/foo.png, which means the browser tries to load assets/assets/foo.png). Having this configuration option in this plugin lets you use relative publicPaths just for <link>/<script> tags.

It's entirely possible that I'm configuring webpack wrong, but that's the reason I want this configuration option.

[jantimon]

what about

// Modules
{
   test: /\.s?css$/,
   loader: ExtractTextPlugin.extract('style', '!css?-minimize!postcss!sass', {publicPath: '../../'})
}
// ...
plugins: [
    new ExtractTextPlugin('assets/css/[name].css', {
      allChunks: true
    })

[tomshen]

Setting publicPath: "" for CSS loaders fixed my issue. Thanks for the help! I'll close my PR.

[jantimon]

Thanks for further investigation 👍

[pospi]

There's still no explicit way to solve this problem, though I did also find a workaround for the limitation I was encountering. You are expecting people to be deploying 1-page apps for this; and some of us will have serverside rendering behind it for preloading and SEO.

You're rendering the link and script tags based on the filename attributes set in the webpack config. This isn't enough:

• I hit my app at /index.html and it requests main.js, which resolves to /main.js and we're fine.
• I hit my app at /login/ and we're also fine.
• I hit my app at /my-coolest-blog/my-bestest-post and main.js (or .css) nor resolves to /my-coolest-blog/main.js and we get a 404 instead of our application code.

_The workaround_: specify your filenames with a leading / in your webpack config. This will be ignored by your system's path resolution (// is just changed to /) and also cause the output to have a root-relative URL in it. This only works for apps hosted at the domain root, however, so I think the problem still necessitates the option @tomshen has implemented above?

[jantimon]

@pospi your workaround sounds awefull - that's what webpacks public path setting is for..
Please read: http://stackoverflow.com/questions/28846814/what-does-publicpath-in-webpack-do

This plugin is using this public path. So if you setup webpack correctly this plugin will work as well.

[pospi]

haha, oh dear. You're absolutely right- I've adjusted my config as stated and am getting what I was expecting now. Whenever I wrote that clearly wasn't the best day ever ><

[jantimon]

No problem it takes a lot of time to understand all the webpack configuration options

[pospi]

oh youre telling me, this is my 4th time round with it and I still manage to F it up. Upgrading to Webpack2 hasn't been as smooth as I'd hoped :p

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.