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.

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

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"
}

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'
})

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"
}

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"
}

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"
}

MIT