Webpack couldn't solve the file path

nativescriptcore

#1

Hi there,
Now I am building nativescript with angular app by using webpack. I want to load an extra html file in my component by using webview. It’s ok if I don’t use webpack. When I used webpack, the file path couldn’t be solved. If some of you have some experiences with that case, please share.

Thanks & Best Regards,
Zaw Zaw Naing


#2

Simply keep it inside app resources so it’s packed with app or add the path for HTML file into webpack copy plugin config.


#3

Hi manojdcoder,
Can you share with screen cast for the case you suggested please?

  1. If I put that html file in App_Resources, how do I call from my component?
  2. Where do I put my HTML file path in webpack plugin config.

Thanks & Best Regards,
Zaw Zaw Naing


#4

You should have something similar to this in your webpack config,

new CopyWebpackPlugin([
              {
                from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
                to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
                context: projectRoot
              },
            ]),
            // Copy assets to out dir. Add your own globs as needed.
            new CopyWebpackPlugin([
                { from: "fonts/**" },
                { from: "**/*.jpg" },
                { from: "**/*.png" },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Add your HTML file to the copy list, it will be copied and accessible from your app directory at runtime.