NativeScript / nativescript-cli

Command-line interface for building NativeScript apps
https://www.npmjs.com/package/nativescript
Apache License 2.0
1.04k stars 195 forks source link

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

Open mrwrighty opened 3 years ago

mrwrighty commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

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

xml is

`

rigor789 commented 3 years ago

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

mrwrighty commented 3 years ago

No definitely a jpg file in my images folder

Screenshot 2021-06-14 at 12 30 10

rigor789 commented 3 years ago

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 commented 3 years ago

OK webpack updated

Screenshot 2021-06-14 at 13 01 20

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

rigor789 commented 3 years ago

Yep, that should be fine.

mrwrighty commented 3 years ago

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