Comments (7)
Was looking through this today, and it did have me stumped initially as well. What you have to do is supply an additional param of regExp
on the query string with the regex you want to match against the source file path.
In my case, my source path is something like src/moduleName/images/image.png
, and my build directory is build/modules/moduleName
. To have the file loader place the images in build/modules/moduleName/images
, the regex and naming I used is: regExp=src\/(.+?)\/&name=[1]/images/[hash].[ext]
.
The regex isn't perfect, but without spending hours on it, I was unable to generate a matcher that would extract all groups between slashes that started after a particular string.
Anyway, hope this helps someone place files in a subdirectory inside their module entry point!
from file-loader.
After just stumbling with this myself.
You want to use the regExp option, it doesn't use the regExp from the test. [0] in regex is the whole capture, you want the second capture [2].
The regex your using is a little greedy, imagine the name of your import is 'img/animage.jpg'. The regex will get 'img/animage'
The name templage [2]/img/[name].[ext] would then output the file as img/animage/img/animage.jpg
from file-loader.
That didn't work for me... trying to get the query string applied in the file for cache busting icon fonts. Just kept coming out as font.eot?[1] :(
Does url-loader not have it maybe?
{
test: /\.(eot|ttf|woff|woff2|svg)/i,
loader: 'url-loader?regExp=\\.[ext]\\?(.+)&limit=1&name=assets/[name].[ext]?[1]
}
from file-loader.
I don't think this is currently supported, I think the readme is taken from https://github.com/webpack/loader-utils
I'd love for this to work as well, as I'd like to place images in sub directories.
from file-loader.
@Benno007 don't think url-loader
has this option yet. I'd be happy to be proven wrong though.
from file-loader.
@pixeldrew @leonardoanalista @danahartweg we can implement customInterpolateName
from https://github.com/webpack/loader-utils/blob/ddf64e49c5871c7229a5a536656a711479c08516/lib/interpolateName.js#L89 and it is allow to using custom function to set name. Will it help to solve your problem?
from file-loader.
I can't see how having that option would hurt. I was able to fix my issue, perhaps some clearer documentation would also help.
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.