webpack set output path for js/css

Question

In default webpack setting, the output js/css is under the root path, something like

    <link href=/css/app.ff6d5467.css rel=preload as=style>
    <link href=/css/chunk-vendors.e6bc587c.css rel=preload as=style>
    <link href=/js/app.a9f1ae4f.js rel=preload as=script>
    <link href=/js/chunk-vendors.7cfe59d2.js rel=preload as=script>
    <link href=/css/chunk-vendors.e6bc587c.css rel=stylesheet>
    <link href=/css/app.ff6d5467.css rel=stylesheet>

However, when I deploy my service, it's under a sub path of the host, something like http://all-services.com/myservice, where there is a nginx proxy routing all traffic under /myservice to my service, so these js/css will end up with 404 error because they're trying to access resource under http://all-service.com/js and http://all-service.com/css.

I want to change the path of these js/css when webpack build, change to /myservice/js and /myservice/css for example, how should I config this in webpack?

Hi Ziqi, do you only need js/css or all of your bundled files to be served at /myservice/? — Lucas David Ferrero
– Lucas David Ferrero, Commented Nov 2, 2021 at 20:59
@LucasDavidFerrero yes we assume /myserivce only serve those bundled files (through nginx static file serving), i.e., mostly frontend things, and API calls to backend will go through other paths — Ziqi Liu
– Ziqi Liu, Commented Nov 3, 2021 at 19:08

Mario Varchmin · Accepted Answer · 2021-11-02 21:28:06Z

1

Add this to your webpack.config.js:

output: {
    publicPath: "/myservice",
},

The publicPath component will be inserted into the href before the css or js uri path component.

Documentation: https://webpack.js.org/guides/public-path/

answered Nov 2, 2021 at 21:28

Mario Varchmin

3,7924 gold badges21 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

webpack set output path for js/css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related