title: What webpack4 loader is used to load *.svg files, *.gif, *.eot?
body: <p>I'm developing a react UI component and it depends on another UI component (react-widgets/lib/DropDownlist).  This javascript module has resources that end with these file extensions: *.gif, *.eot, *.svg, *.woff, *.ttf.  </p>
  
  <p>Webpack4 is complaining that it doesn't know how to process these file types and that I might need a loader to handle these file type.  One error is:</p>
  
  <pre><code>Error in .../react-widgets/dist/fonts/rw-widgets.svg?v=4.1.0
  Module parse failed: ...
  **You may need an appropriate loader to handle this file type.**
  </code></pre>
  
  <p>So I need to update my webpack.config.js file with the appropriate loaders for those file types.  <a href="https://github.com/markusenglund/react-npm-component-starter/blob/master/webpack.config.js" rel="nofollow noreferrer">My config is based off of this</a>.  <em>Side Note: A 
  shout out goes to <a href="https://medium.com/dailyjs/a-guide-to-building-a-react-component-for-npm-68f03b314753" rel="nofollow noreferrer">Mark England who wrote this article which does a fantastic job for how to create a reusable component</a>.</em></p>
  
  <p>The relevant snippet is:</p>
  
  <pre><code>// Snippet from Mark's code webpack.config.js
   module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          use: "babel-loader",
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        }
      ]
  },
  </code></pre>
  
  <p>I know what the <a href="https://webpack.js.org/concepts/loaders/#configuration" rel="nofollow noreferrer">syntax for webpack</a> is to define the loaders but I don't know what loaders to use.   But this sample webpack config file didn't include support for these other file types.</p>
  
  <p><strong>What have I done to try and solve the problem</strong></p>
  
  <ul>
  <li><p>I generally use create-react-app so I avoid this problem altogether. :-)  It, however, doesn't allow me to create react libraries for distribution (AFAIK).</p></li>
  <li><p>First I searched on the net <strong><em>webpack *.gif loader</em></strong>.  Nothing useful.</p></li>
  <li><p>Next I searched for <strong><em>webpack loaders based on file type</em></strong>.  This gave some good results that describe the <a href="https://webpack.js.org/concepts/loaders/#configuration" rel="nofollow noreferrer">loader syntax</a>, pointed me to some loaders <a href="https://github.com/webpack-contrib/file-loader" rel="nofollow noreferrer">file-loader</a> and how to use them, and <a href="https://stackoverflow.com/questions/42074224/webpack-2-how-to-apply-different-loaders-for-files-with-same-extension">this question on SO</a> that helps me realize the *.svg loader might be what I need to load svg files.</p></li>
  </ul>
  
  <p><code>{test: /\.svg$/, use: "svg-inline-loader"},</code></p>
  
  <p>So I might be able to use svg-inline-loader for the *.svg files.
  I can repeat this approach for all of the file types.</p>
  
  <p><strong>The next approach is to examine Create React App (CRA)</strong></p>
  
  <p>I primarily develop in react, and look at the CRA webpack config files (because the create-react-app appears to stay leading edge on these topic).  So I can see the url-loader is used for images (based on what the <code>node_modules/react-scripts/config/webpack.config.dev.js</code> file is using).</p>
  
  <p>Another one down...</p>
  
  <p><strong>My question</strong></p>
  
  <p><strong>Does webpack (or another website) have a table that lists the loaders available for given file types?</strong></p>
  
  <p>For example, 
  know good image loaders for the following file types are:</p>
  
  <pre><code>Webpack 4
  *.gif, *.jpg =&gt; url-loader
  *.svg =&gt; svg-inline-loader
  *.eot =&gt; ???
  </code></pre>
  
  <p>I realize that because webpack is more of a plugin/loader architecture that it might not be <em>webpacks</em> place to have this list so another website might need to have it.</p>
  
  <p><strong>When you need a loader what do you do?</strong>
  If there is no central place to look for this answer, then please share how you find loaders that are needed to solve your webpack file loading problem.</p>