https://github.com/kossnocorp/static-files-webpack-plugin
A companion plugin for static-file-loader, it emits a JSON file with paths to included static files.
https://github.com/kossnocorp/static-files-webpack-plugin
Last synced: 15 days ago
JSON representation
A companion plugin for static-file-loader, it emits a JSON file with paths to included static files.
- Host: GitHub
- URL: https://github.com/kossnocorp/static-files-webpack-plugin
- Owner: kossnocorp
- Created: 2015-11-01T01:48:50.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-01T08:09:19.000Z (about 6 years ago)
- Last Synced: 2025-03-29T01:34:47.650Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 63.5 KB
- Stars: 6
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# StaticFilesWebpackPlugin
[](https://travis-ci.org/kossnocorp/static-files-webpack-plugin) [](https://ci.appveyor.com/project/kossnocorp/static-files-webpack-plugin)
A companion plugin for [static-file-loader](https://github.com/kossnocorp/static-file-loader),
it emits a JSON file with processed static file paths.
It's like [assets-webpack-plugin](https://github.com/sporto/assets-webpack-plugin)
but for static assets.
## Installation
Install [static-file-loader](https://github.com/kossnocorp/static-file-loader) and
[file-loader](https://github.com/webpack/file-loader):
```sh
npm install static-file-loader file-loader --save-dev
```
Install the plugin:
```sh
npm install static-files-webpack-plugin --save-dev
```
## Example
In a webpack config:
```js
var path = require('path')
var StaticFilesWebpackPlugin = require('static-files-webpack-plugin')
// ...
var distPath = path.join(process.cwd(), 'dist')
module.exports = {
// ...
output: {
path: distPath,
publicPath: '/',
// ...
},
plugins: [new StaticFilesWebpackPlugin({
outputPath: path.join(distPath, 'static.json')
})]
}
```
In an entry:
```js
require.context('!!static-file!./static', true, /.+/)
// ...
```
Run webpack to build entries:
```sh
webpack
```
`cat dist/static.json`:
```json
{
"/Users/koss/src/date-fns/date-fns.org/ui/static/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}
```
## Options
### `outputPath`
Specifies an output path for the JSON file. By default `outputPath` equals to
`path.join(process.cwd(), 'static.json')`.
It could be an absolute path:
```js
new StaticFilesWebpackPlugin({
outputPath: path.join(distPath, 'static.json')
})
```
… or a path relative to `process.cwd()`:
```js
new StaticFilesWebpackPlugin({
outputPath: 'static.json'
})
```
### `useRelativePaths`
Allows to omit `process.cwd()` in the JSON keys. By default it equals
to false and produces such output:
```json
{
"/Users/koss/src/date-fns/date-fns.org/ui/static/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}
```
If `useRelativePaths` is true, then it will looks like this:
```json
{
"ui/static/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}
```
The option also could be a string (an absolute path or a path relative
to `process.cwd()`):
```js
new StaticFilesWebpackPlugin({
useRelativePaths: 'ui/static'
})
```
```json
{
"img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}
```
### `prefix`
Use `prefix` for replacing the string part of the path that was passed to
`useRelativePaths`.
```js
new StaticFilesWebpackPlugin({
useRelativePaths: 'ui/static',
prefix: 'vendor/ui'
})
```
```json
{
"vendor/ui/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}
```
### `replace`
Use `replace` for rewriting the resulting relative paths. For example,
when some static assets are symlinked from the different folder you might want to
replace specific part of the path.
```js
new StaticFilesWebpackPlugin({
useRelativePaths: true,
replace: (processedPath) => { processedPath.replace('img', 'static/img') }
})
```
```json
{
"static/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}
```
## License
MIT