Search code examples
javascriptreactjswebpackreact-boilerplate

JavaScript import favicon.ico

I met this string of code: 

import '!file-loader?name=[name].[ext]!./images/favicon.ico';

here.

Please, explain me, how this construction works, in details, if possible, or help to get an info about it

Solution

  • That's an inline Webpack loader. The name parameter seems redundant to me since it would name the imported icon to favicon . ico, which is the name of the icon, so it doesn't change anything.

    The square bracket notation is the way Webpack knows where to input certain data. [name] will be replaced with the filename, [ext] will be replaced with the file extension, and e.g. [chunkhash] will be replaced by a unique hash for the particular file. You could try [name].[chunkhash].[ext] as an experiment to see what it does.