我如何获得 webpack publicPath

Question

我正在使用以下代码向 MdIconRegistry 添加图标：

constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
  iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('/assets/svg-sprite-action-symbol.svg'));
  iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('/assets/svg-sprite-content-symbol.svg'));
  iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('/assets/svg-sprite-navigation-symbol.svg'));
}

不幸的是，这在使用时会中断ng [build|serve] --deploy-url=/public/ （在生产中我想部署ng build输出到 CDN）

有没有办法可以从我的角度组件访问 webpack publicPath 变量，以便我可以指定相对于它的 svg 图标的 url？

我查看了ng build输出，可以看到变量设置在 中inline.bundle.js，但我不确定如何正确访问它。

/******/    __webpack_require__.p = "/public/";

Answer 1

如果您有权访问webpack-configration file那么您可以轻松获得公共路径

假设您webpack.config.js的项目根目录中有组件文件/src/component/mycomponent.js

你的 webpack.config.js 是这样的

module.exports = {
.
.
.
 output: {
   path: "somthing",
   filename: "somthing",
   publicPath: "something"
 }
.
.
.
}

那么/src/component/mycomponent.js就会像

import webpackConfig from "../../webpack.config"

const publickPath = webpackConfig.output.publicPath

webpack 配置文件就像另一个 javascript 文件，您可以从中导入内容