The following question was rewritten, because I have now a working solution, but no answer to the question above.
The repository that shows different scenarios how to use resources packed with webpack is named example-webpack-dynamic-resources. It contains 3 modules:
inline: a solution, but not useful in my context (many resource files)
file: a solution by using the plugin webpack-require-from
public-path: no solution yet, shows how I would like to use __webpack?public_path__.
I think I have read any resource about webpack and publicPath and __webpack_public_path__, but I don't get it to work. I try to dynamically change the path to static resources, but it fails.
Here is my context:
I build a Javascript library that will be used on web pages (HTML, CSS, Javascript).
It provides a lot (>100) static resources to small image files, combined > 500 KB. Only a fraction of it will be used by the user looking at the web site.
Therefore I would like to pack the CSS into the bundle, but keep the image resources in a directory located on the server somewhere. The default path to it will be /img.
As long as I use the same structure (which means, images only under ROOT/img/**, everything is ok.
But the users of the library should be able to configure the path to the image resources on their will.
You will find all relevant files in my example repository example-webpack-dynamic-resources in the module public-path-resources.
webpack.js: Use file-loader for images, which are referenced in CSS files. CSS will be inlined by style-loader and css-loader.
src/public-path.js: Define the global variable with a default (no environment variable).
src/index.js: require first public-path, then the logic.
examples/exam1-root/index.html: Tries to use the assets in the sub directory lib, sets the value therefore to __webpack_public_path__ = '/lib/. Not working.
examples/exam2-different-dirs/index.html: Moves the library to a different dir (not relevant), but uses the originally defined directory pgnv-assets for the assets. Working.
examples/exam3-non-standard-dirs/index.html: Try to use instead my-assets as directory for the assets. Not working.
How could the __webpack_public_path__ defined at runtime in the index.html file?
Related
I'm working on a Vue component library built via VueCLI (and using Storybook Js, Bulma, and Buefy) and I am having issues consuming the CSS downstream. Specifically when I import the CSS file from my package, I am getting Webpack errors with referenced images.
For example, in my upstream src scss files I have a file called "notice-badge.scss" and am referencing background images like so:
.notice-badge img {
background-image: url('#/assets/img/warning-dark.svg');
}
and my src directory structure looks like:
my-app/
|--src/
|--assets/
|--scss/
|-- notice-badge.scss
|--img/
|--warning-dark.svg
|--fonts/
|--vue-components/
and I build the packages with this command which produces no errors.
vue-cli-service build --target lib --name my-ui-components ./src/index.ts
This outputs my JS, a CSS file, and 2 directories (img and fonts) into my "dist" directory. The images listed in my errors are infact inthere.
So over in another Vue cli app (and later Nuxt) I will be importing the CSS file and Vue components but I am getting a "can't resolve" error on that warning-dark.svg file:
Can't resolve /img/warning-dark.a45b259b.svg in /Users/myname/sites/my-app/ui-components/dist. My package also contains font awesome font files too (a business decision to include this all up stream)
So how can I get my downstream Vue CLI app to resolve the images and fonts referenced inside my node_modules dir?
You have (at least) 3 options:
Inline the images/fonts as data URLs.
Use a relative path in the output and require apps that install your package to move the image directory to the same path as the built CSS file.
Don't ship built CSS, but instead source SCSS files. That way file loading/moving can be handled with WebPack configuration in the app that uses it (using file_loader. You can include example configuration in your package to make this easier.
If you're writing a Vue component library, it probably makes most sense to use method 3. However from your description it seems like this may not be an option (the business decision you mention). Method 2 might be viable but I didn't try it nor seen someone else suggest it.
Inline
This method probably is easiest and has best performance. If your other SVGs are similar to the examples, it seems like they should all be relatively small files. There's few reasons for a component library to ship big images, so this might be sufficient for your use case.
If you're using WebPack 5, you can inline assets using "Asset Modules".
module: {
rules: [
{
test: /\.svg/,
type: 'asset/inline'
}
]
}
If you tried this, you may have run into the following problem.
Since Sass implementations don't provide url rewriting, all linked
assets must be relative to the output.
If you pass the generated CSS on to the css-loader, all urls must be
relative to the entry-file (e.g. main.scss).
If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.
You can try replacing url('#/assets/img/warning-dark.svg') with url('../img/warning-dark.svg') (or whatever the path relative to the entrypoint is). Does it now properly inline them?
I have created a web component, uploaded it to npm, and imported it into another project.
I use webpack to bundle all of the code used within the web component, which creates a bundle file (in my case index.js).
This is the structure of my dist folder:
/dist
/static
/images
/fonts
index.js
Everything works, except loading images or fonts (static files). How can this issue be overcome? I have just added the static files to a public github repo at the moment, and load them from there. But I do not think this is the right way to do it.
I guess if the images are not that large, they can be converted into base64 and just bundled with the rest of the code?
Any thoughts
Found a similar question Paths in Web Components are Relative to Root.
The webcomponent specification defines that URLs are always relative
to the main document. This, of course, breaks web component
encapsulation, as you rightly concluded. In other words, the
specification is buggy, and lots of people are complaining about it.
My attempts at making an IO game is failing, as I can't dynamically load images after I have packed the game using WebPack (a hypothesis). When I lazy load any assets whether it be cross origin or local, it doesn't seem to load and render.
in index.js I have this in phaser's create():
this.load.image('arc_red', 'https://art.pixilart.com/187aec08b8014f7.gif');//testing with this
this.load.once('complete', ()=>{console.log('image loaded!')}, this);
this.load.start();
when I use the preload, it does work. But dynamically it does not. I've been searching for nearly a day straight without any luck.
question:
Is my assumption correct? And if it is, what is a way I can dynamically load images after WebPack has packed the files?
I'm no webpack expert (and depending on the webpack version), but if you are not using a webpack.config, the default behavior is that there should be:
webpack bundle files are placed into the ./dist folder. So to answer your question, any file that is not in this folder is not bundled with webpack
Except if they are "inlined" in the main.js, I think images are not be inlined automatically/without plugin, or atleast in the version I used to use.
dev-server offers an extra folder, where "static" files can be placed, it is ./public(https://webpack.js.org/configuration/dev-server/)
So all files that are served from the dev-server must be in on of those folders.
I would place the images/assets into that ./public folder, and than they should be visible.
Info: I tripped over this once, files placed in ./public folder are accessed, as if they would be in the ./dist folder.
I have a styles.css in my Angular 2 application.
It's referred to in app.styles object in .angular-cli.json.
Inside that css I have urls to background images, e.g:
.bg-game {
background-image: url("assets/app/game_bg_768.jpg");
}
When compiling the app, it seems Angular 2 copies the files from their location into the root folder of the compiled app and adds to its name a random hash.
For instance assets/app/game_bg_768.jpg will be copied to dist/ (compiled app folder) as game_bg_768.023f195663c85e8f0322.jpg.
Then in the styles css compiled by Angular 2, the reference will be changed accordingly:
.bg-game {
background-image: url("game_bg_768.023f195663c85e8f0322.jpg");
}
I'd like to disable that whole process, only for images that are linked to in CSS, I don't want to disable random hashes generation for the whole app.
The reason behind this - I'm preloading assets/app/game_bg_768.jpg before the game starts, but since a different url is specified in the compiled css, during the game another request is made to load game_bg_768.023f195663c85e8f0322.jpg.
Another reason is, I'd like my images to remain in my assets folder, I don't want them to be duplicated into the root folder of the compiled app.
You can use absolute URLs to avoid it.
.bg-game {
background-image: url("/assets/app/game_bg_768.jpg");
}
However, after you do that, the compiler won't check if the images exist in assets directory anymore.
Also, if you are deploying your app to a subdirectory of the domain, the browser will look for the asset on /assets instead of /subdirectory/assets. Using base-href or deploy-url won't help.
As an idea, you need to reconfigure webpack settings and set corresponding loader settings.
BUT, AFAIK by default AngularCLI doesn't provide a visible config file for webpack, so, you need to make some tricks for that and keep in mind aftermath or you can try to play with assets configuration in .angular-cli.json
With smart gwt 4 when I run the application I get the following error
Core SmartClient JavaScript libraries appear not to be loaded.
If inheriting the NoScript SmartGWT modules, verify that the HTML file includes tags to load the SmartClient module .js files from the appropriate location within the WAR.
By default these files are present under [GWT app name]/sc/modules/.
com.smartgwt.client.core.JsObject$SGWT_WARN: Core SmartClient JavaScript libraries appear not to be loaded.
If inheriting the NoScript SmartGWT modules, verify that the HTML file includes tags to load the SmartClient module .js files from the appropriate location within the WAR.
By default these files are present under [GWT app name]/sc/modules/.
I have set the following jar in my classpath
smartgwt.jar
smartgw-skin.jar
and add the inhert in my .gwt.xml file
And in my jps file i add the script
Thanks in advance
Make sure all of the paths are correct and the files are there in your WAR. It's also important to understand how the GWT directory structure works inside WAR files (the relative paths are not always what you think they should be).
Have you tried using GWT.getModuleBaseURL() or GWT.getHostPageBaseURL() for your paths?
Check these other posts for more info:
Path for images folder in GWT project
https://groups.google.com/forum/#!topic/google-web-toolkit/PxdjqjMIlVY