Trying to make a small ionic app scripts tweak

Ionic Framework ionic-v3
1

Hello. I need to make a small change to my webpack config and am not 100% sure the best way to do it. Any advice would be appreciated.

I need to change the webpack output “publicPath” from relative path “build/” to the absolute path “/build/”.

That’s all I want to do, but after fiddling around it seems like I need to copy the entire original config file content out of node_modules, make my one tiny change, and then set this as an override config file in package.json? Is that right?

It’s working, but I’d rather not simply copy the file verbatim like that and don’t want to have to check for changes every time I update the app scripts. Is there any way to make this a more targeted override?

2

AFAIK, you are doing what needs to be done.

3

@lloydv. I ran into this problem recently too and found a better solution in my opinion.

Webpack has a global variable it uses for this during compilation time: __webpack_public_path__
In the documentation (https://webpack.js.org/guides/public-path/#set-value-on-the-fly) , they suggest that you overwrite things in the entry point of your application. (app/main.ts in ionic’s case)

In an ionic application:

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

declare var __webpack_public_path__: string;   // Make typescript compilation happy
__webpack_public_path__ = "static/mobile/build/";  // Override where my static files are


platformBrowserDynamic().bootstrapModule(AppModule);

In my case, I’m setting this dynamically when my page is loaded by sending it from the server. Which looks something like this:

Index.html (before I reference main.js)

<script>
    window.ServerConfig = {"publicPath": "static/mobile/build/"};
</script>

app/main.ts

declare var __webpack_public_path__: string;
declare var ServerConfig: any;

__webpack_public_path__ = window.ServerConfig.publicPath;

This should help avoid duplicating ionic’s webpack file and keeping it in sync with upgrades.

1 Like