Editing webpack.config.js does not trigger changes to the build

[mrwrighty]

Nativescript 8.0.7 Xcode 12.4 Webpack 5.0.0-beta.0

Editing the webpack.config.js file does not push changes to simulator on debug.

Any changes to the webpack.config.js file are ignored after running ns debug ios.

Have done a ns clean and run ns debug ios but problem persists.

[rigor789]

Editing the webpack config requires you to restart the build process ie. ns run, ns debug. But you mention ns clean which wipes the project and then you ran it again - that should work fine, mind sharing the config you are trying to use?

[mrwrighty]

Webpack file is: -

const webpack = require("@nativescript/webpack");

module.exports = (env) => { webpack.init(env); webpack.Utils.addCopyRule('images/**'); return webpack.resolveConfig();

};

Trying to get my images to copy to project, so editing the addCopyRule after running ns debug ios but not seeing changes propergate. The compiled .app file also does not change, should it?, hence me running ns clean. Previous projects running under ns7 have my images under and images folder in the app file when I view the package contents. Cannot get images to compile in ns8

Had no joy in displaying images in my project after upgrading to NS8 images folder is under the app folder. have tried ~/images/* images/*, ~/images/** but no joy.

[rigor789]

You can verify if they are copied by looking inside the platforms folder for example in platforms/android/app/src/main/assets/app - after adding the above rule, and building, I can see the images folder appear with all the images. If that's working then you probably need to adjust how you are referencing the in your <Image> component.

In my case I have app/images/NativeScript-Vue.png and the following webpack config

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);
	webpack.Utils.addCopyRule('images/**');

	return webpack.resolveConfig();
};

in my template, I added:

<Image row="1" src="~/images/NativeScript-Vue.png"/>

And the image shows up as expected.

[mrwrighty]

Does the image folder get copied to the app file on debug. So debug app file view package contents open app folder and see the images folder.

[mrwrighty]

I have app/images/wfsl-logo.png.

code in app/views/home/home-page.xml & app/views/home/home-page.js

xml is

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar title="Home" class="action-bar"></ActionBar> <ScrollView> <StackLayout class="home-panel" verticalAlignment="top"> <Image src="~/images/wfsl-logo.jpg" width="100" /> <GridLayout rows="70, 70, 70, 70, 70,70" width="100%" horizontalAlignment="center"> <Button text="Monday" tap="onMondayTap" class="button" row="0" /> <Button text="Wednesday" tap="onWednesdayTap" class="button" row="1"/> <Button text="Settings" tap="onSettingsTap" class="button" row="2" /> <Button text="Help" tap="onHelpTap" class="button" row="3"/> <Button text="About" tap="onAboutTap" class="button" row="4"/> <Label id="appVersion" text="" horizontalAlignment="center" marginTop="20" fontSize="12px" row="5" /> </GridLayout> </StackLayout> </ScrollView> </Page>

webpack.config.js

` const webpack = require("@nativescript/webpack");

module.exports = (env) => { webpack.init(env); webpack.Utils.addCopyRule("images/**"); return webpack.resolveConfig();

}; `

Image folder not being copied to output.

[rigor789]

You are referencing src="~/images/wfsl-logo.jpg, but have a .png in the folder.

[mrwrighty]

No definitely a jpg file in my images folder

[rigor789]

Oh, you typed

I have app/images/wfsl-logo.png.

That's why I suggested that.

But do verify the asset is being copied in the platforms folder, as that's the most important part.

And also update @nativescript/webpack to 5.0.0-beta.14 - missed that you were on beta.0 (quite old).

[mrwrighty]

OK webpack updated

CLI Output shows webpack 5.38.1 compiled with 1 warning in 313 ms is this version correct.

[rigor789]

Yep, that should be fine.

[mrwrighty]

OK some progress but very strange. In the end I downloaded an example from Marketplace

https://play.nativescript.org/?template=play-tsc&id=uQmH4X&v=1

This project had images. Migrated and compile and the images displayed correctly. Did ns clean, replaced the apps folder with my code, re-compiled and the images are showing. Nothing different in the webpack.config.js, just a plain stand file

const webpack = require("@nativescript/webpack"); module.exports = (env) => { webpack.init(env); // Learn how to customize: // https://docs.nativescript.org/webpack return webpack.resolveConfig(); };

Images are now showing in platforms/android/app/src/main/assets/app as expected. I have no idea why this worked and my original app would not.

This only worked for Android, images are still missing from ios