Comments (14)
@brunocodutra The default behaviour for many webpack plugins is to keep the path unchanged (according to the prefix) if no publicPath is offered. Why add a reference to the root folder if no path is offered?
from webapp-webpack-plugin.
I have the same issue :(
from webapp-webpack-plugin.
By definition, URLs to assets are composed as '${publicPath}/${prefix}/${assetName}
, where publicPath
is configured by Webpack: https://webpack.js.org/guides/public-path/
If it's not set, it defaults to /
, so if you need it to be relative, then just set it as appropriate.
from webapp-webpack-plugin.
@brunocodutra I tried to add publicPath: path.join(__dirname, "dist")
and still locate to root, my js and css works fine.
from webapp-webpack-plugin.
This is probably due to #105, could you retry with caching disabled?
from webapp-webpack-plugin.
It defaults to '/'
because otherwise it would produce broken output by default, since browserconfig.xml
does not support relative paths, see https://stackoverflow.com/questions/27116378/mstile-image-location-specification
from webapp-webpack-plugin.
I am running into this issue as well. We use <base href="somecdn.net/somebuild/" />
in our index.html to control delivery of assets. HTMLWebpackPlugin
does not add a leading slash to its injected resources, only webapp-webpack-plugin
is adding this leading slash to its injected resources in index.html.
This is inconsistent with HTMLWebpackPlugin
's behavior and makes it impossible for us to use webapp-webpack-plugin
for favicon injection into index.html.
from webapp-webpack-plugin.
It seems like the path should only get fixed up when rendering browserconfig.xml
, rather than breaking expected behavior for injected assets in HTMLWebpackPlugin in index.html
from webapp-webpack-plugin.
Are you able to set publicPath: ''
?
Does that fix the issue for you?
from webapp-webpack-plugin.
@brunocodutra I can't set publicPath because it's controlled by Next.js framework I'm using. Is it possible to override this option only for webapp-webpack-plugin?
from webapp-webpack-plugin.
@sheerun could you give more details, e.g. what output do you get and what you expect instead?
from webapp-webpack-plugin.
This is still not ideal behavior.
My use case is building static files to be hosted under subfolders, e.g. http://example.com/app1, http://example.com/app2, etc. This makes relative paths incredibly useful, because it decouples the app from the deployment.
I can't find any way to do that with webapp-webpack-plugin without manually setting the subfolder in the build configuration meaning I must know the subfolder ahead of time.
The closest I can get is doing something like this:
new WebappWebpackPlugin({
logo: "/path/to/icon.png"
outputPath: "icons/",
publicPath: "icons/",
prefix: "",
}),
This will cause all the icons to be resolved relatively like normal, but the manifest files don't take into account the relative path, so the browser will request something like icons/icons/file...
instead of icons/file...
.
If the manifest files could be made to reference the files relatively, or even give another option similar to publicPath
but just for manifests, it would fix this issue.
from webapp-webpack-plugin.
@korylprince doesn't the following do what you expect, i.e. resolve icons relative to the manifest file?
new WebappWebpackPlugin({
logo: "/path/to/icon.png"
outputPath: "icons/",
publicPath: ".",
prefix: "",
}),
Note however that relative paths in manifest files may not always work https://stackoverflow.com/questions/27116378/mstile-image-location-specification
from webapp-webpack-plugin.
That fixes the manifest problem, but now all the files are referenced in index.html
without the icon/
so it's just shifting the problem.
I understand the problem with browserconfig.xml, but I'm in agreement with others that have posted here that the default behavior should be the more useful and any corner cases should be handled for the weird cases like browserconfig.xml with additional config or something.
Because I didn't say it before, thanks for the project!
from webapp-webpack-plugin.
Related Issues (20)
- allow outputted file name to include prefix HOT 1
- Cache hash should depend on Favicons version HOT 4
- Build fails when html-webpack-plugin is not installed HOT 1
- Convenient way to get generated html tags from js HOT 7
- Add hash as query string HOT 4
- Support xhtml flag HOT 3
- Apple - larger resolutions not being generated HOT 6
- Exclamation mark in `favicons` property value makes the build crash HOT 3
- Allow logo option to be an array HOT 1
- Make this work with mini-html-webpack-plugin? HOT 1
- Gray border around png shapes HOT 1
- favicon outside of assets folder HOT 7
- Please Delete HOT 2
- Multiple icons sources? HOT 6
- Update favicons dependency to v5.4.0 HOT 3
- Deprecated media attribute
- Add feature to configure filenames to append hash HOT 7
- Not inject to html HOT 14
- An in-range update of webpack is breaking the build 🚨 HOT 7
- Intermittent Error with sharp dep HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webapp-webpack-plugin.