TopGit tracks webpack-contrib/file-loader on GitHub as part of the Frontend family. The project has 1.8k stars. File Loader
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
And run webpack via your preferred method. This will emit file.png as a file
in the output directory (with the specified naming convention, if options are
specified to do so) and returns the public URI of the file.
ℹ️ By default the filename of the resulting file is the hash of the file's contents with the original extension of the required resource.
Specifies a custom filename template for the target file(s) using the query
parameter name. For example, to emit a file from your context directory into
the output directory retaining the full directory structure, you might use:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
publicPath: (url, resourcePath, context) => {
// `resourcePath` is original absolute path to asset
// `context` is directory where stored asset (`rootContext`) or `context` option
// To get relative path you can use
// const relativePath = path.relative(context, resourcePath);
if (/my-custom-image\.png/.test(resourcePath)) {
return `other_public_path/${url}`;
}
if (/images/.test(context)) {
return `image_output_path/${url}`;
}
return `public_path/${url}`;
},
},
},
],
},
};
postTransformPublicPath
Type: Function
Default: undefined
Specifies a custom function to post-process the generated public path. This can be used to prepend or append dynamic global variables that are only available at runtime, like __webpack_public_path__. This would not be possible with just publicPath, since it stringifies the values.
If true, emits a file (writes a file to the filesystem). If false, the loader
will return a public URI but will not emit the file. It is often useful to
disable this option for server-side packages.
Specifies a Regular Expression to one or many parts of the target file path.
The capture groups can be reused in the name property using [N]
placeholder.
ℹ️ If [0] is used, it will be replaced by the entire tested string, whereas [1] will contain the first capturing parenthesis of your regex and so on...
esModule
Type: Boolean
Default: true
By default, file-loader generates JS modules that use the ES modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
# result
https://cdn.example.com/directory/image.png?width=300&height=300
Dynamic public path depending on environment variable at run time
An application might want to configure different CDN hosts depending on an environment variable that is only available when running the application. This can be an advantage, as only one build of the application is necessary, which behaves differently depending on environment variables of the deployment environment. Since file-loader is applied when compiling the application, and not when running it, the environment variable cannot be used in the file-loader configuration. A way around this is setting the __webpack_public_path__ to the desired CDN host depending on the environment variable at the entrypoint of the application. The option postTransformPublicPath can be used to configure a custom path depending on a variable like __webpack_public_path__.
main.js
const assetPrefixForNamespace = (namespace) => {
switch (namespace) {
case 'prod':
return 'https://cache.myserver.net/web';
case 'uat':
return 'https://cache-uat.myserver.net/web';
case 'st':
return 'https://cache-st.myserver.net/web';
case 'dev':
return 'https://cache-dev.myserver.net/web';
default:
return '';
}
};
const namespace = process.env.NAMESPACE;
__webpack_public_path__ = `${assetPrefixForNamespace(namespace)}/`;
Does webpack-contrib/file-loader have a project website?
No homepage URL was recorded for webpack-contrib/file-loader in TopGit's last sync. The README tab above frequently contains screenshots and demo links, or check the repository description on GitHub.
Is webpack-contrib/file-loader open source?
Yes — webpack-contrib/file-loader ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/webpack-contrib/file-loader.
What else is in the Frontend space?
webpack-contrib/file-loader is tracked by TopGit under the Frontend category, alongside 3 GitHub-tagged topics. Trending and Topics pages list peer repositories of comparable stars and language.
What is webpack-contrib/file-loader?
webpack-contrib/file-loader (webpack-contrib/file-loader) is a JavaScript project on GitHub. From the project's own README: File Loader
What license does webpack-contrib/file-loader use?
webpack-contrib/file-loader is released under the MIT license. Always verify the LICENSE file directly on GitHub for the authoritative terms — license strings can be edited out of sync with a project's actual stance.
Where do I read more about webpack-contrib/file-loader?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/webpack-contrib/file-loader is the definitive source.
Why is webpack-contrib/file-loader categorized under Frontend?
TopGit places webpack-contrib/file-loader in the Frontend category based on its GitHub topics and description (tagged: "file", "webpack", "webpack-loader"). Categories are assigned from real repository metadata, not editorial guesswork.
Read full README in the tab above.
Still deciding about file-loader?
One click hands the question to an AI along with this page — see what it says about file-loader.
/file-loader
