Webpack4处理*.svg、*.gif、*.eot需用什么Loader？求查找方法

Great question! Let’s break this down clearly for your React project scenario:

Is there an official/community list mapping file types to Webpack loaders? #

While there’s no single universal "master list" covering every possible file type, Webpack’s official docs and common community practices offer clear guidance for most common resource types like fonts, images, and SVGs. Here’s a quick breakdown for the types you’re dealing with:

• Image files (.gif): Use url-loader or file-loader (these are the standard for Webpack 4; Webpack 5 has native asset modules, but they don’t apply here)
• Font files (.eot, .woff, .woff2, .ttf): Same as above—file-loader or url-loader work perfectly for all font formats, since they’re just binary assets that need to be copied to your output directory (or inlined as base64 for small files)
• SVG files: Use url-loader/file-loader if you just need to load them as static assets, or svg-inline-loader/@svgr/webpack if you want to import SVGs as React components.

How to find the right loader for any file type? #

If you ever encounter a new file type and need a loader, here are reliable ways to track down what you need:

1. Check Webpack’s official documentation: The Webpack docs have a dedicated section on asset handling that covers most common scenarios, pointing you to recommended loaders or native features.
2. Search npm with targeted keywords: For example, if you need a loader for .eot files, search for webpack eot loader on npm. Prioritize packages with high download counts, recent updates, and positive reviews—these are usually the most reliable.
3. Reference similar open-source projects: Look at the webpack.config.js files of projects using the same dependencies as you (like react-widgets). Many libraries or example repos share their configs, which you can adapt for your project.
4. Use catch-all loaders for binary assets: Loaders like file-loader are general-purpose—they handle any binary file by copying it to your output directory and returning the public URL. This is a safe fallback if you can’t find a specialized loader for a rare file type.

Example Webpack 4 Configuration #

Here’s how to update your webpack.config.js to handle all the resource types from react-widgets:

First, install the required loaders:

npm install url-loader file-loader --save-dev

Then add this rule to your module.rules array:

module.exports = {
  // ... your existing entry, output, plugins, etc.
  module: {
    rules: [
      // Your existing JS/JSX rule
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // Your existing CSS rule
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // New rule for fonts and images
      {
        test: /\.(gif|eot|svg|woff|woff2|ttf)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192, // Inline files smaller than 8KB as base64
            name: '[name].[hash:8].[ext]', // Unique filename to avoid caching issues
            outputPath: 'assets/fonts/' // Output directory for larger files
          }
        }
      }
    ]
  }
};

Notes on SVG Handling #

If you want to import SVGs as React components instead of static assets, add a separate rule for SVG files:

{
  test: /\.svg$/,
  use: 'svg-inline-loader'
}

Or if you prefer JSX-compatible SVG components, install @svgr/webpack and use:

{
  test: /\.svg$/,
  use: ['@svgr/webpack']
}

内容的提问来源于stack exchange，提问作者PatS