Angular自定义Webpack构建：将图片转为Base64内联资源

Let's fix your configuration so it works universally across templates, TypeScript files, and SCSS stylesheets—no special require syntax needed.

Why Your Current Config Isn't Working #

Your approach of using config.module.rules.shift() to remove the default image rule is unreliable because Angular's Webpack rule order can change between versions. Additionally, appending your rule after the default ones means Angular's original image loader will still take precedence, ignoring your custom setup.

The Correct Custom Webpack Config #

Instead of guessing rule positions, we'll find and replace Angular's default image handling rule with our own using url-loader (a Webpack-recommended tool that’s more compatible with Angular’s build pipeline than base64-inline-loader):

module.exports = (config) => {
  // Locate the existing rule that handles image assets
  const imageRuleIndex = config.module.rules.findIndex(rule => 
    rule.test && rule.test.test('.png') // Match any rule that processes .png files (adjust if needed)
  );

  if (imageRuleIndex !== -1) {
    // Replace the default rule with our Base64 inlining setup
    config.module.rules[imageRuleIndex] = {
      test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: Infinity, // Inline ALL images as Base64 (set a number like 8192 to only inline small files)
            encoding: 'base64',
            fallback: 'file-loader', // Optional: Fallback to file-loader for extra-large files if needed
            name: '[name].[ext]'
          }
        }
      ]
    };
  } else {
    // If no default image rule exists, add our rule directly
    config.module.rules.push({
      test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: Infinity,
            encoding: 'base64',
            name: '[name].[ext]'
          }
        }
      ]
    });
  }

  return config;
};

Step-by-Step Setup #

1. Install Required Dependencies
   First, make sure url-loader (and file-loader if using the fallback) are installed:

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

2. Verify Angular.json Configuration
   Double-check that your angular.json is properly set up to use the custom Webpack builder:

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // ... rest of your build options
       }
     }
   }
   

3. Test Across Your Project
   Now you can reference images normally in all parts of your project, and they'll be automatically inlined as Base64:

   • Component Templates: <img src="./assets/logo.png" alt="Logo">
   • SCSS Styles: background-image: url('./assets/bg.png');
   • TypeScript Files: logoUrl = './assets/logo.png'; (no more !!url-loader! prefix needed)

Why This Works #

By targeting and replacing Angular's default image rule, we ensure our url-loader setup takes priority. This works seamlessly with Angular's SCSS processing pipeline, which automatically resolves url() references in stylesheets and passes them through Webpack's loaders.

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