project bootstrap

This commit is contained in:
2023-11-25 18:12:47 -05:00
parent 5cd875ae80
commit 6ef22d88f9
39139 changed files with 4944609 additions and 2 deletions
+385
View File
@@ -0,0 +1,385 @@
# Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [6.2.0](https://github.com/webpack-contrib/file-loader/compare/v6.1.1...v6.2.0) (2020-10-27)
### Features
* added the `sourceFilename` property to asset info with original filename ([#393](https://github.com/webpack-contrib/file-loader/issues/393)) ([654e0d6](https://github.com/webpack-contrib/file-loader/commit/654e0d641ec067089f6a2d12e30ec3520f00d808))
### Bug Fixes
* immutable flag when the `name` option have hash in query string ([#392](https://github.com/webpack-contrib/file-loader/issues/392)) ([381d8bd](https://github.com/webpack-contrib/file-loader/commit/381d8bda3f2494487bfe840386e365b97b6025fe))
### [6.1.1](https://github.com/webpack-contrib/file-loader/compare/v6.1.0...v6.1.1) (2020-10-09)
### Chore
* update `schema-utils`
## [6.1.0](https://github.com/webpack-contrib/file-loader/compare/v6.0.0...v6.1.0) (2020-08-31)
### Features
* pass immutable flag to asset info ([#383](https://github.com/webpack-contrib/file-loader/issues/383)) ([40fcde8](https://github.com/webpack-contrib/file-loader/commit/40fcde81681d4f8ee19d2ee3845fd34e24459195))
## [6.0.0](https://github.com/webpack-contrib/file-loader/compare/v5.1.0...v6.0.0) (2020-03-17)
### ⚠ BREAKING CHANGES
* use `md4` by default for hashing ([#369](https://github.com/webpack-contrib/file-loader/issues/369)) ([ad39022](https://github.com/webpack-contrib/file-loader/commit/ad3902284d28adeddf667212a39faa4c6bfb2964))
## [5.1.0](https://github.com/webpack-contrib/file-loader/compare/v5.0.2...v5.1.0) (2020-02-19)
### Features
* support the `query` template for the `name` option ([#366](https://github.com/webpack-contrib/file-loader/issues/366)) ([cd8698b](https://github.com/webpack-contrib/file-loader/commit/cd8698b1d9fd560d85e912acca9a1e24f00e18f8))
### [5.0.2](https://github.com/webpack-contrib/file-loader/compare/v5.0.1...v5.0.2) (2019-11-25)
### Chore
* add the `funding` field in `package.json`
### [5.0.1](https://github.com/webpack-contrib/file-loader/compare/v5.0.0...v5.0.1) (2019-11-25)
### Bug Fixes
* name of `esModule` option in source code ([#346](https://github.com/webpack-contrib/file-loader/issues/346)) ([31d6589](https://github.com/webpack-contrib/file-loader/commit/31d6589b71b471f83908e80380dff9b9eada2d06))
## [5.0.0](https://github.com/webpack-contrib/file-loader/compare/v4.2.0...v5.0.0) (2019-11-22)
### BREAKING CHANGES
* minimum required nodejs version is `10.13.0`
* rename the `esModules` option to `esModule`
* switch to ES modules by default (the option `esModule` is `true` by default)
## [4.3.0](https://github.com/webpack-contrib/file-loader/compare/v4.2.0...v4.3.0) (2019-11-21)
### Features
* new `esModules` option to output ES modules ([#340](https://github.com/webpack-contrib/file-loader/issues/340)) ([9b9cd8d](https://github.com/webpack-contrib/file-loader/commit/9b9cd8d22b3dbe4677be9bdd0bf5fbe07815df54))
## [4.2.0](https://github.com/webpack-contrib/file-loader/compare/v4.1.0...v4.2.0) (2019-08-07)
### Features
* `postTransformPublicPath` option ([#334](https://github.com/webpack-contrib/file-loader/issues/334)) ([c136f44](https://github.com/webpack-contrib/file-loader/commit/c136f44))
## [4.1.0](https://github.com/webpack-contrib/file-loader/compare/v4.0.0...v4.1.0) (2019-07-18)
### Features
* improved validation error messages ([#339](https://github.com/webpack-contrib/file-loader/issues/339)) ([705eed4](https://github.com/webpack-contrib/file-loader/commit/705eed4))
## [4.0.0](https://github.com/webpack-contrib/file-loader/compare/v3.0.1...v4.0.0) (2019-06-05)
### chore
* **deps:** update ([#333](https://github.com/webpack-contrib/file-loader/issues/333)) ([0d2f9b8](https://github.com/webpack-contrib/file-loader/commit/0d2f9b8))
### BREAKING CHANGES
* **deps:** minimum required nodejs version is `8.9.0`
<a name="3.0.1"></a>
## [3.0.1](https://github.com/webpack-contrib/file-loader/compare/v3.0.0...v3.0.1) (2018-12-20)
### Bug Fixes
* relax options validation for additional properties ([#309](https://github.com/webpack-contrib/file-loader/issues/309)) ([c74d44e](https://github.com/webpack-contrib/file-loader/commit/c74d44e))
<a name="3.0.0"></a>
# [3.0.0](https://github.com/webpack-contrib/file-loader/compare/v2.0.0...v3.0.0) (2018-12-20)
### Code Refactoring
* drop support for webpack < 4 ([#303](https://github.com/webpack-contrib/file-loader/issues/303)) ([203a4ee](https://github.com/webpack-contrib/file-loader/commit/203a4ee))
* more validations in `options` schema
### Features
* `resourcePath` is now available in `outputPath` and `publicPath` ([#304](https://github.com/webpack-contrib/file-loader/issues/304)) ([0d66e64](https://github.com/webpack-contrib/file-loader/commit/0d66e64))
* `context` is now available in `outputPath` and `publicPath` ([#305](https://github.com/webpack-contrib/file-loader/issues/305)) ([d5eb823](https://github.com/webpack-contrib/file-loader/commit/d5eb823))
### BREAKING CHANGES
* removed the `useRelativePath` option. It is dangerously and break url when you use multiple entry points.
* drop support for webpack < 4
<a name="2.0.0"></a>
# [2.0.0](https://github.com/webpack-contrib/file-loader/compare/v1.1.11...v2.0.0) (2018-08-21)
### Code Refactoring
* **defaults:** update to latest webpack-defaults ([#268](https://github.com/webpack-contrib/file-loader/issues/268)) ([687f422](https://github.com/webpack-contrib/file-loader/commit/687f422))
### BREAKING CHANGES
* **defaults:** Enforces `engines` of `"node": ">=6.9.0 < 7.0.0 || >= 8.9.0"`
<a name="1.1.11"></a>
## [1.1.11](https://github.com/webpack/file-loader/compare/v1.1.10...v1.1.11) (2018-03-01)
### Reverts
* **index:** `context` takes precedence over `issuer.context` (`options.useRelativePath`) ([#260](https://github.com/webpack/file-loader/issues/260)) ([e73131f](https://github.com/webpack/file-loader/commit/e73131f))
<a name="1.1.10"></a>
## [1.1.10](https://github.com/webpack/file-loader/compare/v1.1.9...v1.1.10) (2018-02-26)
### Bug Fixes
* **package:** add `webpack >= 4` (`peerDependencies`) ([#255](https://github.com/webpack/file-loader/issues/255)) ([3a6a7a1](https://github.com/webpack/file-loader/commit/3a6a7a1))
<a name="1.1.9"></a>
## [1.1.9](https://github.com/webpack/file-loader/compare/v1.1.8...v1.1.9) (2018-02-21)
### Bug Fixes
* **index:** handle protocol URL's correctly (`options.publicPath`) ([#253](https://github.com/webpack/file-loader/issues/253)) ([54fa5a3](https://github.com/webpack/file-loader/commit/54fa5a3))
* **index:** use `path.posix` for platform consistency ([#254](https://github.com/webpack/file-loader/issues/254)) ([2afe0af](https://github.com/webpack/file-loader/commit/2afe0af))
<a name="1.1.8"></a>
## [1.1.8](https://github.com/webpack/file-loader/compare/v1.1.7...v1.1.8) (2018-02-20)
### Bug Fixes
* **index:** `context` takes precedence over `issuer.context` (`options.useRelativePath`) ([3b071f5](https://github.com/webpack/file-loader/commit/3b071f5))
* **index:** don't append `outputPath` to the original `url` (`options.outputPath` `{Function}`) ([4c1ccaa](https://github.com/webpack/file-loader/commit/4c1ccaa))
* **index:** normalize and concat paths via `path.join()` ([26e47ca](https://github.com/webpack/file-loader/commit/26e47ca))
<a name="1.1.7"></a>
## [1.1.7](https://github.com/webpack/file-loader/compare/v1.1.6...v1.1.7) (2018-02-19)
### Bug Fixes
* **index:** don't concat `options.outputPath` and `options.publicPath` ([#246](https://github.com/webpack/file-loader/issues/246)) ([98bf052](https://github.com/webpack/file-loader/commit/98bf052))
<a name="1.1.6"></a>
## [1.1.6](https://github.com/webpack/file-loader/compare/v1.1.5...v1.1.6) (2017-12-16)
### Bug Fixes
* rootContext compatibility fix for legacy / v4 (#237) ([1e4b7cf](https://github.com/webpack/file-loader/commit/1e4b7cf)), closes [#237](https://github.com/webpack/file-loader/issues/237)
<a name="1.1.5"></a>
## [1.1.5](https://github.com/webpack/file-loader/compare/v1.1.4...v1.1.5) (2017-10-05)
### Bug Fixes
* **schema:** allow `name` to be a `{Function}` (`options.name`) ([#216](https://github.com/webpack/file-loader/issues/216)) ([fbfb160](https://github.com/webpack/file-loader/commit/fbfb160))
<a name="1.1.4"></a>
## [1.1.4](https://github.com/webpack/file-loader/compare/v1.1.3...v1.1.4) (2017-09-30)
### Bug Fixes
* **index:** revert to CJS exports ([#212](https://github.com/webpack/file-loader/issues/212)) ([f412b3e](https://github.com/webpack/file-loader/commit/f412b3e))
<a name="1.1.3"></a>
## [1.1.3](https://github.com/webpack/file-loader/compare/v1.1.2...v1.1.3) (2017-09-30)
<a name="1.1.2"></a>
## [1.1.2](https://github.com/webpack/file-loader/compare/v1.1.1...v1.1.2) (2017-09-30)
### Bug Fixes
* **cjs:** export `raw` value ([#183](https://github.com/webpack/file-loader/issues/183)) ([daeff0e](https://github.com/webpack/file-loader/commit/daeff0e))
<a name="1.1.1"></a>
## [1.1.1](https://github.com/webpack/file-loader/compare/v1.1.0...v1.1.1) (2017-09-30)
### Bug Fixes
* **schema:** allow `additionalProperties` ([#207](https://github.com/webpack/file-loader/issues/207)) ([cf7c85a](https://github.com/webpack/file-loader/commit/cf7c85a))
<a name="1.1.0"></a>
# [1.1.0](https://github.com/webpack/file-loader/compare/v1.0.0...v1.1.0) (2017-09-29)
### Features
* add `options` validation (`schema-utils`) ([#184](https://github.com/webpack/file-loader/issues/184)) ([696ca77](https://github.com/webpack/file-loader/commit/696ca77))
<a name="1.0.0"></a>
# [1.0.0](https://github.com/webpack/file-loader/compare/v1.0.0-rc.0...v1.0.0) (2017-07-26)
### Bug Fixes
* remove `=` from default export (`SyntaxError`) ([#178](https://github.com/webpack/file-loader/issues/178)) ([3fe2d12](https://github.com/webpack/file-loader/commit/3fe2d12))
### Code Refactoring
* Upgrade to defaults 1.3.0 ([#170](https://github.com/webpack-contrib/file-loader/pull/170)) ([632ed72](https://github.com/webpack/file-loader/commit/acd6c2f))
* Apply webpack-defaults ([#167](https://github.com/webpack/file-loader/issues/167)) ([632ed72](https://github.com/webpack/file-loader/commit/632ed72))
### BREAKING CHANGES
* Enforces Webpack standard NodeJS engines range.
at the time of merge `>= 4.3 < 5.0.0 || >= 5.10`.
<a name="1.0.0-rc.0"></a>
# [1.0.0-rc.0](https://github.com/webpack/file-loader/compare/v1.0.0-beta.1...v1.0.0-rc.0) (2017-07-26)
### Bug Fixes
* remove `=` from default export (`SyntaxError`) ([#178](https://github.com/webpack/file-loader/issues/178)) ([3fe2d12](https://github.com/webpack/file-loader/commit/3fe2d12))
<a name="1.0.0-beta.1"></a>
# [1.0.0-beta.1](https://github.com/webpack/file-loader/compare/v1.0.0-beta.0...v1.0.0-beta.1) (2017-06-09)
### Code Refactoring
* Upgrade to defaults 1.3.0 ([#170](https://github.com/webpack-contrib/file-loader/pull/170)) ([632ed72](https://github.com/webpack/file-loader/commit/acd6c2f))
<a name="1.0.0-beta.0"></a>
# [1.0.0-beta.0](https://github.com/webpack/file-loader/compare/v0.11.2...v1.0.0-beta.0) (2017-06-07)
### Code Refactoring
* Apply webpack-defaults ([#167](https://github.com/webpack/file-loader/issues/167)) ([632ed72](https://github.com/webpack/file-loader/commit/632ed72))
### BREAKING CHANGES
* Enforces Webpack standard NodeJS engines range.
at the time of merge `>= 4.3 < 5.0.0 || >= 5.10`.
<a name="0.11.2"></a>
## [0.11.2](https://github.com/webpack/file-loader/compare/v0.11.1...v0.11.2) (2017-06-05)
### Bug Fixes
* **index:** allow to override publicPath with an empty string ([#145](https://github.com/webpack/file-loader/issues/145)) ([26ab81a](https://github.com/webpack/file-loader/commit/26ab81a))
* init `publicPath` to undefined ([#159](https://github.com/webpack/file-loader/issues/159)) ([e4c0b2a](https://github.com/webpack/file-loader/commit/e4c0b2a))
<a name="0.11.1"></a>
## [0.11.1](https://github.com/webpack/file-loader/compare/v0.11.0...v0.11.1) (2017-04-01)
### Bug Fixes
* outputPath function overriden by useRelativePath ([#139](https://github.com/webpack/file-loader/issues/139)) ([80cdee2](https://github.com/webpack/file-loader/commit/80cdee2))
<a name="0.11.0"></a>
# [0.11.0](https://github.com/webpack/file-loader/compare/v0.10.1...v0.11.0) (2017-03-31)
### Features
* Emit files with relative urls ([#135](https://github.com/webpack/file-loader/issues/135)) ([dbcd6cc](https://github.com/webpack/file-loader/commit/dbcd6cc))
<a name="0.10.1"></a>
## [0.10.1](https://github.com/webpack/file-loader/compare/v0.10.0...v0.10.1) (2017-02-25)
### Bug Fixes
* **getOptions:** deprecation warn in loaderUtils ([#129](https://github.com/webpack/file-loader/issues/129)) ([a8358a0](https://github.com/webpack/file-loader/commit/a8358a0))
<a name="0.10.0"></a>
# [0.10.0](https://github.com/webpack/file-loader/compare/v0.9.0...v0.10.0) (2017-01-28)
### Features
* **resources:** specify custom public file name ([6833c70](https://github.com/webpack/file-loader/commit/6833c70))
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+20
View File
@@ -0,0 +1,20 @@
Copyright JS Foundation and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+763
View File
@@ -0,0 +1,763 @@
<div align="center">
<a href="https://github.com/webpack/webpack">
<img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
</div>
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]
# file-loader
The `file-loader` resolves `import`/`require()` on a file into a url and emits the file into the output directory.
## Getting Started
To begin, you'll need to install `file-loader`:
```console
$ npm install file-loader --save-dev
```
Import (or `require`) the target file(s) in one of the bundle's files:
**file.js**
```js
import img from './file.png';
```
Then add the loader to your `webpack` config. For example:
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};
```
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.
## Options
### `name`
Type: `String|Function`
Default: `'[contenthash].[ext]'`
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:
#### `String`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name(resourcePath, resourceQuery) {
// `resourcePath` - `/absolute/path/to/file.js`
// `resourceQuery` - `?foo=bar`
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[contenthash].[ext]';
},
},
},
],
},
};
```
> ️ By default the path and name you specify will output the file in that same directory, and will also use the same URI path to access the file.
### `outputPath`
Type: `String|Function`
Default: `undefined`
Specify a filesystem path where the target file(s) will be placed.
#### `String`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
outputPath: 'images',
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
outputPath: (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_output_path/${url}`;
}
if (/images/.test(context)) {
return `image_output_path/${url}`;
}
return `output_path/${url}`;
},
},
},
],
},
};
```
### `publicPath`
Type: `String|Function`
Default: [`__webpack_public_path__`](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)+outputPath
Specifies a custom public path for the target file(s).
#### `String`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
publicPath: 'assets',
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```js
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.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
loader: 'file-loader',
options: {
publicPath: '/some/path/',
postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
},
},
],
},
};
```
### `context`
Type: `String`
Default: [`context`](https://webpack.js.org/configuration/entry-context/#context)
Specifies a custom file context.
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
context: 'project',
},
},
],
},
],
},
};
```
### `emitFile`
Type: `Boolean`
Default: `true`
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.
**file.js**
```js
// bundle file
import img from './file.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'file-loader',
options: {
emitFile: false,
},
},
],
},
],
},
};
```
### `regExp`
Type: `RegExp`
Default: `undefined`
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](https://github.com/webpack-contrib/file-loader#placeholders).
**file.js**
```js
import img from './customer01/file.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/i,
name: '[1]-[name].[ext]',
},
},
],
},
],
},
};
```
> ️ 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](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
You can enable a CommonJS module syntax using:
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
],
},
};
```
## Placeholders
Full information about placeholders you can find [here](https://github.com/webpack/loader-utils#interpolatename).
### `[ext]`
Type: `String`
Default: `file.extname`
The file extension of the target file/resource.
### `[name]`
Type: `String`
Default: `file.basename`
The basename of the file/resource.
### `[path]`
Type: `String`
Default: `file.directory`
The path of the resource relative to the webpack/config `context`.
### `[folder]`
Type: `String`
Default: `file.folder`
The folder of the resource is in.
### `[query]`
Type: `String`
Default: `file.query`
The query of the resource, i.e. `?foo=bar`.
### `[emoji]`
Type: `String`
Default: `undefined`
A random emoji representation of `content`.
### `[emoji:<length>]`
Type: `String`
Default: `undefined`
Same as above, but with a customizable number of emojis
### `[hash]`
Type: `String`
Default: `md4`
Specifies the hash method to use for hashing the file content.
### `[contenthash]`
Type: `String`
Default: `md4`
Specifies the hash method to use for hashing the file content.
### `[<hashType>:hash:<digestType>:<length>]`
Type: `String`
The hash of options.content (Buffer) (by default it's the hex digest of the hash).
#### `digestType`
Type: `String`
Default: `'hex'`
The [digest](https://en.wikipedia.org/wiki/Cryptographic_hash_function) that the
hash function should use. Valid values include: base26, base32, base36,
base49, base52, base58, base62, base64, and hex.
#### `hashType`
Type: `String`
Default: `'md4'`
The type of hash that the has function should use. Valid values include: `md4`, `md5`, `sha1`, `sha256`, and `sha512`.
#### `length`
Type: `Number`
Default: `undefined`
Users may also specify a length for the computed hash.
### `[N]`
Type: `String`
Default: `undefined`
The n-th match obtained from matching the current file name against the `regExp`.
## Examples
### Names
The following examples show how one might use `file-loader` and what the result would be.
**file.js**
```js
import png from './image.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'dirname/[contenthash].[ext]',
},
},
],
},
],
},
};
```
Result:
```bash
# result
dirname/0dcbbaa701328ae351f.png
```
---
**file.js**
```js
import png from './image.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[sha512:hash:base64:7].[ext]',
},
},
],
},
],
},
};
```
Result:
```bash
# result
gdyb21L.png
```
---
**file.js**
```js
import png from './path/to/file.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[contenthash]',
},
},
],
},
],
},
};
```
Result:
```bash
# result
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
```
### CDN
The following examples show how to use `file-loader` for CDN uses query params.
**file.js**
```js
import png from './directory/image.png?width=300&height=300';
```
**webpack.config.js**
```js
module.exports = {
output: {
publicPath: 'https://cdn.example.com/',
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext][query]',
},
},
],
},
],
},
};
```
Result:
```bash
# 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**
```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)}/`;
```
**file.js**
```js
import png from './image.png';
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/assets/',
publicPath: 'static/assets/',
postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
},
},
],
},
};
```
Result when run with `NAMESPACE=prod` env variable:
```bash
# result
https://cache.myserver.net/web/static/assets/image.somehash.png
```
Result when run with `NAMESPACE=dev` env variable:
```bash
# result
https://cache-dev.myserver.net/web/static/assets/image.somehash.png
```
## Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.
[CONTRIBUTING](./.github/CONTRIBUTING.md)
## License
[MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/file-loader.svg
[npm-url]: https://npmjs.com/package/file-loader
[node]: https://img.shields.io/node/v/file-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/file-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/file-loader
[tests]: https://github.com/webpack-contrib/file-loader/workflows/file-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/file-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/file-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/file-loader
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
[size]: https://packagephobia.now.sh/badge?p=file-loader
[size-url]: https://packagephobia.now.sh/result?p=file-loader
+6
View File
@@ -0,0 +1,6 @@
"use strict";
const loader = require('./index');
module.exports = loader.default;
module.exports.raw = loader.raw;
+87
View File
@@ -0,0 +1,87 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = loader;
exports.raw = void 0;
var _path = _interopRequireDefault(require("path"));
var _loaderUtils = require("loader-utils");
var _schemaUtils = require("schema-utils");
var _options = _interopRequireDefault(require("./options.json"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function loader(content) {
const options = (0, _loaderUtils.getOptions)(this);
(0, _schemaUtils.validate)(_options.default, options, {
name: 'File Loader',
baseDataPath: 'options'
});
const context = options.context || this.rootContext;
const name = options.name || '[contenthash].[ext]';
const url = (0, _loaderUtils.interpolateName)(this, name, {
context,
content,
regExp: options.regExp
});
let outputPath = url;
if (options.outputPath) {
if (typeof options.outputPath === 'function') {
outputPath = options.outputPath(url, this.resourcePath, context);
} else {
outputPath = _path.default.posix.join(options.outputPath, url);
}
}
let publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;
if (options.publicPath) {
if (typeof options.publicPath === 'function') {
publicPath = options.publicPath(url, this.resourcePath, context);
} else {
publicPath = `${options.publicPath.endsWith('/') ? options.publicPath : `${options.publicPath}/`}${url}`;
}
publicPath = JSON.stringify(publicPath);
}
if (options.postTransformPublicPath) {
publicPath = options.postTransformPublicPath(publicPath);
}
if (typeof options.emitFile === 'undefined' || options.emitFile) {
const assetInfo = {};
if (typeof name === 'string') {
let normalizedName = name;
const idx = normalizedName.indexOf('?');
if (idx >= 0) {
normalizedName = normalizedName.substr(0, idx);
}
const isImmutable = /\[([^:\]]+:)?(hash|contenthash)(:[^\]]+)?]/gi.test(normalizedName);
if (isImmutable === true) {
assetInfo.immutable = true;
}
}
assetInfo.sourceFilename = (0, _utils.normalizePath)(_path.default.relative(this.rootContext, this.resourcePath));
this.emitFile(outputPath, content, null, assetInfo);
}
const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true;
return `${esModule ? 'export default' : 'module.exports ='} ${publicPath};`;
}
const raw = true;
exports.raw = raw;
+66
View File
@@ -0,0 +1,66 @@
{
"additionalProperties": true,
"properties": {
"name": {
"description": "The filename template for the target file(s) (https://github.com/webpack-contrib/file-loader#name).",
"anyOf": [
{
"type": "string"
},
{
"instanceof": "Function"
}
]
},
"outputPath": {
"description": "A filesystem path where the target file(s) will be placed (https://github.com/webpack-contrib/file-loader#outputpath).",
"anyOf": [
{
"type": "string"
},
{
"instanceof": "Function"
}
]
},
"publicPath": {
"description": "A custom public path for the target file(s) (https://github.com/webpack-contrib/file-loader#publicpath).",
"anyOf": [
{
"type": "string"
},
{
"instanceof": "Function"
}
]
},
"postTransformPublicPath": {
"description": "A custom transformation function for post-processing the publicPath (https://github.com/webpack-contrib/file-loader#posttransformpublicpath).",
"instanceof": "Function"
},
"context": {
"description": "A custom file context (https://github.com/webpack-contrib/file-loader#context).",
"type": "string"
},
"emitFile": {
"description": "Enables/Disables emit files (https://github.com/webpack-contrib/file-loader#emitfile).",
"type": "boolean"
},
"regExp": {
"description": "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 (https://github.com/webpack-contrib/file-loader#regexp).",
"anyOf": [
{
"type": "string"
},
{
"instanceof": "RegExp"
}
]
},
"esModule": {
"description": "By default, file-loader generates JS modules that use the ES modules syntax.",
"type": "boolean"
}
},
"type": "object"
}
+42
View File
@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.normalizePath = normalizePath;
function normalizePath(path, stripTrailing) {
if (path === '\\' || path === '/') {
return '/';
}
const len = path.length;
if (len <= 1) {
return path;
} // ensure that win32 namespaces has two leading slashes, so that the path is
// handled properly by the win32 version of path.parse() after being normalized
// https://msdn.microsoft.com/library/windows/desktop/aa365247(v=vs.85).aspx#namespaces
let prefix = '';
if (len > 4 && path[3] === '\\') {
// eslint-disable-next-line prefer-destructuring
const ch = path[2];
if ((ch === '?' || ch === '.') && path.slice(0, 2) === '\\\\') {
// eslint-disable-next-line no-param-reassign
path = path.slice(2);
prefix = '//';
}
}
const segs = path.split(/[/\\]+/);
if (stripTrailing !== false && segs[segs.length - 1] === '') {
segs.pop();
}
return prefix + segs.join('/');
} // eslint-disable-next-line import/prefer-default-export
+75
View File
@@ -0,0 +1,75 @@
{
"name": "file-loader",
"version": "6.2.0",
"description": "A file loader module for webpack",
"license": "MIT",
"repository": "webpack-contrib/file-loader",
"author": "Tobias Koppers @sokra",
"homepage": "https://github.com/webpack-contrib/file-loader",
"bugs": "https://github.com/webpack-contrib/file-loader/issues",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"main": "dist/cjs.js",
"engines": {
"node": ">= 10.13.0"
},
"scripts": {
"start": "npm run build -- -w",
"clean": "del-cli dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
"commitlint": "commitlint --from=master",
"security": "npm audit",
"lint:prettier": "prettier --list-different .",
"lint:js": "eslint --cache .",
"lint": "npm-run-all -l -p \"lint:**\"",
"test:only": "cross-env NODE_ENV=test jest",
"test:watch": "npm run test:only -- --watch",
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
"pretest": "npm run lint",
"test": "npm run test:coverage",
"prepare": "npm run build",
"release": "standard-version",
"defaults": "webpack-defaults"
},
"files": [
"dist"
],
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
},
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@webpack-contrib/defaults": "^6.3.0",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^26.5.2",
"cross-env": "^7.0.2",
"del": "^6.0.0",
"del-cli": "^3.0.1",
"eslint": "^7.10.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-import": "^2.22.1",
"husky": "^4.3.0",
"jest": "^26.5.2",
"lint-staged": "^10.4.0",
"memfs": "^3.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.1.2",
"standard-version": "^9.0.0",
"url-loader": "^4.1.0",
"webpack": "^4.44.2"
},
"keywords": [
"webpack"
]
}