Comments (4)
The url (from a file loaded with the file-loader) starts with output.publicPath
. So you need to provide a correct publicPath. The publicPath should be a relative path relative to the HTML file or and server absolute path.
output.publicPath = ''
means it can find the files in the same folder of the HTML file.
output.publicPath = '/'
means it can find the files in the server root.
In your case the location of the HTML file is not constant. So you either need to provide a server-relative publicPath or provide the publicPath while runtime (set __webpack_public_path__
).
from file-loader.
@sokra This kinda seems like a hack? But it worked for my use case by setting __webpack_public_path__ = "../"
in my entry files for the sub directories.
Although this does not solve the issue for the webpack-dev-server, I can live with this solution for now because it is definitely the most elegant solution so far.
Note:
It does not really solve the issue of having to be dependent on the context root. I believe a change in the file-loader would solve this easily by adhering to a relative path resolve when the public path is not set to absolute. Unfortunately, this would require us to know the context root of each entry point in the file loader to resolve to the correct relative path.
Here is my first stab at that change, but required me to pass the query.context="<dirname>"
Final proposed solution
Here is a compare of the adds to consider
Consideration
- Only applies when
output.publicPath = ''
(empty string) - Assumes that all file-loader assets will be in the relative path to the entry point
- Allows for the checking of webpack-dev-server and run as absolute (see here)
- allows for a root entry point at the same time as sub dir entry points
- If running all entry points from the root of the context, then this would still work properly
from file-loader.
Thank you @sokra. Your reply helped me greatly!
from file-loader.
Closing since it looks like the root problem has been solved now. If there's still a problem, please make a new issue.
from file-loader.
Related Issues (20)
- More documentation around esModules and their behavior please HOT 5
- In the webpack watch mode, the missing image output will appear HOT 1
- Jpeg-2000 support HOT 2
- Provide file stats via named exports HOT 1
- import png from './image.png'; png is object,is not a url(string) HOT 1
- copying images with picture tag HOT 2
- RFC: uglify option HOT 4
- Problem with import webp image HOT 1
- Pass additional assetInfo object when calling emitFile HOT 2
- Is the CDN example correct? HOT 2
- postTransformPublicPath does not work with runtime variables/methods HOT 2
- Breaking change desc in 5.0.0 can be improved HOT 1
- Breaking change desc in 5.0.0 can be improved HOT 5
- Support for loader chaning HOT 1
- 6.2.0 breaks file-loader for me HOT 3
- [Feature Request]Make `emitFile` tree shakingable HOT 6
- asset/resource hash in name HOT 12
- Random uppercase directory being generated HOT 1
- OTS parsing error: invalid version tag | Failed to decode downloaded font: http://localhost:3000/static/7542ab376339625d813fe71d074ee925.woff HOT 3
- OTS parsing error: invalid version tag | Failed to decode downloaded font: http://localhost:3000/static/7542ab376339625d813fe71d074ee925.woff 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 file-loader.