Instruct Angular CLI/Webpack to NOT inline images less than 10Kb in size

Question

When building an Angular app with Angular CLI, resources in CSS, e.g. svg images, less than 10kb in size will be inlined.

This sounds like a good concept from the performance point of view, however, it violates very strict Content Security Policies in my app, which I 'm not allowed to change.

My question is as follows: how can I instruct Angular CLI or Webpack NOT to inline any images?

Answer 1

As suggested by @pixelbits, run ng eject in shell to eject the webpack.config file. This file will allow you to edit the webpack for the application.

Inside webpack.config change limit to whatever you require (0) ?

{
  "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
  "loader": "url-loader",
  "options": {
    "name": "[name].[hash:20].[ext]",
    "limit": 10000
  }
}

This may mean that you can no longer use ng serve as it won't be aware of your new webpack. As a result, navigate to your new webpack directory (same as the angular-cli.json) and instead run webpack-dev-server --port=4200 OR webpack-dev-server --hot for [HMR].