webpack set output path for js/css-CodePudding

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?

CodePudding user response：

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/