Question

我遇到 publicPath 的问题，无法使用 webpack 进行角度编译。我正在使用@ ngtools / webpack v7.0.2

index.html 在 dist 文件夹中

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SOME TITLE</title>

  <link rel="icon" type="image/ico" href="/assets/icon/favicon.ico">
  <link type="text/css" rel="stylesheet" href="/assets/css/loading.css">
  <base href="/">
</head>

<body>

<app></app>

<script src="/example/0.36d80ab2ce84bab337bd.chunk.js"></script>
<script src="/example/polyfills.3a73edf186bd73850713.bundle.js"></script>
<script src="/example/0.36d80ab2ce84bab337bd.chunk.js"></script>
<script src="/example/app.36b571aec7f4f2cf2812.bundle.js"></script>
</body>
</html>

index.html附加脚本标签，如下所示：

<script src="/example/polyfills.3a73edf186bd73850713.bundle.js"></script>

依赖性： “ @ angular / common”：“ ^ 6.1.8”， “ webpack”：“ ^ 4.19.1” “ html-loader”：“ ^ 0.5.5”，

我的问题是我想绑定 publicPath 链接href

来自

  <link type="text/css" rel="stylesheet" href="/assets/css/loading.css">

到

  <link type="text/css" rel="stylesheet" href="example/assets/css/loading.css">

我想将 publicPath 绑定到Angular组件资源，例如：

<div class="app-component">
  <img src="../../assets/img/logo.png">
</div>

我希望img src为 example / assets / img / logo.png

Webpack配置：

 output: {
  publicPath: '/example/',
  filename: '[name].[chunkhash].bundle.js',
  sourceMapFilename: '[name].[chunkhash].bundle.map',
  chunkFilename: '[id].[chunkhash].chunk.js'
},

注意： publicPath 仅适用于捆绑的脚本。

您能解释哪个加载器负责将 publicPath 绑定到角度组件和index.html中的img src吗？

提前谢谢

Angular 6 Webpack配置@ ngtools / webpack

0 个答案: