Drop-in replacement for file-loader
with the only difference: static-file-loader stores a map of original file names to
file names with hashes in the compilation stats:
{
" /Users/koss/src/kossnocorp/static-file-loader/test/fixtures/static/a.gif " : " /980d0a50ac153b475e9fb1b8ffe22619.gif " ,
" /Users/koss/src/kossnocorp/static-file-loader/test/fixtures/static/b.gif " : " /980d0a50ac153b475e9fb1b8ffe22619.gif " ,
" /Users/koss/src/kossnocorp/static-file-loader/test/fixtures/static/c.gif " : " /980d0a50ac153b475e9fb1b8ffe22619.gif "
}
It's helpful if you want to use webpack to pre-build static files and then
build HTML template using the paths map.
npm install static-file-loader file-loader --save-dev
In an entry:
require . context ( ' !!static-file-loader!./static ' , true , / . + / )
Template:
<! DOCTYPE html >
< html >
< head >
< meta charset = ' utf-8 ' />
< link rel = ' shortcut icon ' href = ' <%= staticPath ( ' favicon.png ' ) % > ' />
</ head >
< body >
</ body >
</ html >
Development server:
var staticFilesPath = path . join ( process . cwd ( ) , ' static ' )
var publicPath = webpackConfig . output . publicPath
express ( )
. use ( ' / ' , express . static ( staticFilesPath ) )
. get ( ' * ' , function ( req , res ) {
var html = template ( {
staticPath : function ( staticFilePath ) {
return path . join ( publicPath , staticFilePath )
}
} )
res . send ( html )
} )
Production build script:
var staticMapKey = require ( ' static-file-loader ' ) . key
var staticFilesPath = path . join ( process . cwd ( ) , ' assets ' )
var publicPath = webpackConfig . output . publicPath
webpack ( webpackConfig ) . run ( function ( err , stats ) {
var staticMap = stats . compilation [ staticMapKey ]
var html = template ( {
staticPath : function ( staticFilePath ) {
var processedStaticFilePath = staticMap [ path . join ( staticFilesPath , staticFilePath ) ]
return path . join ( publicPath , processedStaticFilePath )
}
} )
} )
MIT
