指示Angular CLI / Webpack不要内联小于10Kb的图像

Question

使用Angular CLI构建Angular应用程序时，CSS中的资源，例如svg图片，less than 10kb in size will be inlined。

从性能的角度来看，这听起来像是一个很好的概念，然而，它在我的应用程序中违反了非常严格的Content Security Policies，我不允许改变。

我的问题如下：我如何指示Angular CLI或Webpack不内联任何图像？

Answer 1

正如@pixelbits所建议的那样，在shell中运行ng eject以弹出webpack.config文件。该文件允许您编辑应用程序的webpack。

在webpack.config内部将limit改为你需要的任何东西（0）？

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

这可能意味着您不能再使用ng serve，因为它不会知道您的新webpack。因此，导航到您的新webpack目录（与angular-cli.json相同），而不是为webpack-dev-server --port=4200运行webpack-dev-server --hot或[HMR]。