StaticFilesWebpackPlugin

A companion plugin for static-file-loader, it emits a JSON file with processed static file paths.

It's like assets-webpack-plugin but for static assets.

Installation

Install static-file-loader and file-loader:

npm install static-file-loader file-loader --save-dev

Install the plugin:

npm install static-files-webpack-plugin --save-dev

Example

In a webpack config:

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:

require.context('!!static-file!./static', true, /.+/)

// ...

Run webpack to build entries:

webpack

cat dist/static.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:

new StaticFilesWebpackPlugin({
  outputPath: path.join(distPath, 'static.json')
})

… or a path relative to process.cwd():

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:

{
  "/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:

{
  "ui/static/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}

The option also could be a string (an absolute path or a path relative to process.cwd()):

new StaticFilesWebpackPlugin({
  useRelativePaths: 'ui/static'
})

{
  "img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}

prefix

Use prefix for replacing the string part of the path that was passed to useRelativePaths.

new StaticFilesWebpackPlugin({
  useRelativePaths: 'ui/static',
  prefix: 'vendor/ui'
})

{
  "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.

new StaticFilesWebpackPlugin({
  useRelativePaths: true,
  replace: (processedPath) => { processedPath.replace('img', 'static/img') }
})

{
  "static/img/favicon.png": "/e09ef13032827f865ef8004c185277f7.png"
}

License

MIT