how change publicpath in webpack in javascript

To change the publicPath in Webpack, you can modify the output object in the configuration file. The publicPath property specifies the prefix path for all the assets in your application, such as images, scripts, and stylesheets.

index.tsx
module.exports = {
  // other configurations...
  output: {
    publicPath: "/assets/",
    filename: "[name].js",
  },
};
123 chars
8 lines

In the above configuration, the publicPath property is set to /assets/, which means all the assets' URLs will be prefixed with /assets/.

To set the publicPath at runtime, you can use the __webpack_public_path__ variable.

index.tsx
__webpack_public_path__ = "https://example.com/assets/";
57 chars
2 lines

This code should be executed before any other module is loaded, such as in the HTML file.

<script>
  __webpack_public_path__ = "https://example.com/assets/";
</script>
<script src="main.js"></script>
110 chars
5 lines

By setting the __webpack_public_path__ variable dynamically, you can load the assets from a different location at runtime.