Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
file-loader
Advanced tools
The file-loader npm package is used to process files such as images, fonts, and other binary assets within a webpack build process. It can copy files to the output directory and resolve import/require() on a file into a url.
Importing Images
Allows importing image files directly in JavaScript or TypeScript files. The file-loader processes the import and replaces it with the final path to the output file.
import img from './file.png';
Configuring Output Path and Filenames
Configures webpack to output files with a specific naming pattern and to a specific directory. It also allows setting a public path for the files when they are referenced in the browser.
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'images/',
publicPath: 'assets/',
},
},
],
},
],
},
};
Handling Fonts
Enables the inclusion and processing of font files in various formats. The file-loader will handle these assets and output them to a specified directory.
module.exports = {
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
],
},
};
The url-loader works like the file-loader, but can return a Data URL if the file is smaller than a byte limit. This can reduce the number of HTTP requests for small files.
The raw-loader allows importing files as a string. This is useful for importing things like HTML or SVG directly into your JavaScript code, which is different from file-loader's typical binary asset handling.
This plugin allows copying individual files or entire directories to the build directory. It is more flexible than file-loader for simply copying files without processing them through webpack's module system.
npm install --save-dev file-loader
By default the filename of the resulting file is the MD5 hash of the file's contents with the original extension of the required resource.
var url = require("file-loader!./file.png");
// => emits file.png as file in the output directory and returns the public url
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
By default a file is emitted, however this can be disabled if required (e.g. for server side packages).
var url = require("file-loader?emitFile=false!./file.png");
// => returns the public url but does NOT emit a file
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
You can configure a custom filename template for your file using the query parameter name
. For instance, to copy a file from your context
directory into the output directory retaining the full directory structure, you might use ?name=[path][name].[ext]
.
By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file.
You can specify custom output and public paths by using the outputPath
, publicPath
and useRelativePath
query name parameters:
use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
useRelativePath
should be true
if you wish to generate relative URL to the each file context
{
loader: 'file-loader',
query: {
useRelativePath: process.env.NODE_ENV === "production"
}
}
[ext]
the extension of the resource[name]
the basename of the resource[path]
the path of the resource relative to the context
query parameter or option.[hash]
the hash of the content, hex
-encoded md5
by default[<hashType>:hash:<digestType>:<length>]
optionally you can configure
hashType
s, i. e. sha1
, md5
, sha256
, sha512
digestType
s, i. e. hex
, base26
, base32
, base36
, base49
, base52
, base58
, base62
, base64
length
the length in chars[N]
the N-th match obtained from matching the current file name against the query param regExp
require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js
require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html
require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679
require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64
require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64
require("file-loader?name=picture.png!./myself.png");
// => picture.png
require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test
.
Juho Vepsäläinen |
Joshua Wiens |
Artem Sapegin |
Michael Ciniawsky |
Alexander Krasnoyarov |
MIT
FAQs
A file loader module for webpack
The npm package file-loader receives a total of 6,684,082 weekly downloads. As such, file-loader popularity was classified as popular.
We found that file-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.