3

I'm trying to extend Angular CLI build by ngx-build-plus. All is working fine except one thing. I need to use url-loader for png and svg images. I expect that it will replace urls in css by code of image. But it doesn't work. I'm just getting a pack of images in my bundle and standard urls in css.

Angular version 8

This is how I'm working with config

const BASE64_RULE = {
    test: /\.(png|svg)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 2000 * 1024
        }
    }
};

exports.default = {
    config(cfg) {
        return new ConfigModifier(cfg)
            .renameChunk("main", "bundle")
            .addRule(BASE64_RULE)
            .removeRule(rule => rule.loader === "file-loader")
            .get();
    }
};
class ConfigModifier {
    constructor(config) {
        this.config = config;
    }

    get() {
        return this.config;
    }

    renameChunk(from, to) {
        const entry = this.config.entry;
        entry[to] = entry[from];
        delete entry[from];

        return this;
    }

    addRule(rule) {
        this.config.module.rules.push(rule);
        return this;
    }

    removeRule(predicate = () => false) {
        this.config.module.rules = this.config.module.rules.filter(rule => !predicate(rule));
        return this;
    }
}

Here is generated config

[
  {
    "test":  /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
    "parser": {
      "system": true
    }
  },
  {
    "test":  /[\/\\]hot[\/\\]emitter\.js$/,
    "parser": {
      "node": {
        "events": true
      }
    }
  },
  {
    "test":  /[\/\\]webpack-dev-server[\/\\]client[\/\\]utils[\/\\]createSocketUrl\.js$/,
    "parser": {
      "node": {
        "querystring": true
      }
    }
  },
  {
    "test":  /\.js$/,
    "exclude": /(ngfactory|ngstyle)\.js$/}
  },
  {
    "test": /\.js$/,
    "exclude": {},
    "enforce": "pre"
  },
  {
    "test": /\.css$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      }
    ]
  },
  {
    "test": /\.scss$|\.sass$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      },
      {
        "loader": "sass-loader",
        "options": {
          "implementation": {
            "info": "dart-sass\t1.22.9\t(Sass Compiler)\t[Dart]\ndart2js\t2.4.0\t(Dart Compiler)\t[Dart]",
            "types": {}
          },
          "sourceMap": true,
          "precision": 8,
          "includePaths": []
        }
      }
    ]
  },
  {
    "test": /\.less$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      },
      {
        "loader": "less-loader",
        "options": {
          "sourceMap": true,
          "javascriptEnabled": true
        }
      }
    ]
  },
  {
    "test": /\.styl$/,
    "use": [
      {
        "loader": "raw-loader"
      },
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "embedded",
          "sourceMap": "inline"
        }
      },
      {
        "loader": "stylus-loader",
        "options": {
          "sourceMap": true,
          "paths": []
        }
      }
    ]
  },
  {
    "test": /\.css$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      }
    ]
  },
  {
    "test": /\.scss$|\.sass$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      },
      {
        "loader": "sass-loader",
        "options": {
          "implementation": {
            "types": {}
          },
          "sourceMap": true,
          "precision": 8,
          "includePaths": []
        }
      }
    ]
  },
  {
    "test": /\.less$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      },
      {
        "loader": "less-loader",
        "options": {
          "sourceMap": true,
          "javascriptEnabled": true
        }
      }
    ]
  },
  {
    "test": /\.styl$/,
    "use": [
      {
        "loader": "postcss-loader",
        "options": {
          "ident": "extracted",
          "sourceMap": true
        }
      },
      {
        "loader": "stylus-loader",
        "options": {
          "sourceMap": true,
          "paths": []
        }
      }
    ]
  },
  {
    "test": /\.tsx?$/,
    "loader": "node_modules\\@ngtools\\webpack\\src\\index.js"
  },
  {
    "test":  /\.(png|svg)$/,
    "use": {
      "loader": "url-loader",
      "options": {
        "limit": 2048000
      }
    }
  }
]

P.S. Chunk name renames successfully, so I can suppose that ConfigModifier is working.

Maksim
  • 260
  • 4
  • 11
Beardless
  • 31
  • 2

0 Answers0