2

我有一个 Angular 项目，它只包含 web 组件。为了包含组件的资产（仅图像），我想使用自定义 webpack-config 来使用url-loader或类似的东西将组件中使用的图像转换为内联 base64 图像。

我成功设置@angular-builders/custom-webpack并验证它加载了我的webpack.config.js. 经过大量试验和错误后，目前看起来像这样（但仍然无法正常工作）：

// your custom webpack config
module.exports = config => {
  // I verified that the rule for loading images is the first element of the array
  config.module.rules.shift(); 
  config.module.rules = [
    ...config.module.rules,
    {
      test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
      loader: 'base64-inline-loader',
      options: {
        name: '[name].[ext]'
      }
    }
  ];

  return config;
};

我尝试只放置一个配置选项，因为它应该自动合并，但这不起作用，所以我编写了函数来真正覆盖默认的 Angular 图像加载器。

编辑：我发现我可以url-loader从这样的代码中专门使用 webpack：

declare const require;

@Component({...})
export class AComponent {
  logoUrl = require('!!url-loader!logo.svg');
}

这种工作并且可能是解决这个问题的一种方法，因为它仅用于仅 Web 组件的项目中。但是，这在我的 .scss 文件中不起作用，我假设并且我更愿意找到一个解决方案，而不必记住库的特殊知识。

4

0 回答 0