Webpack Angular 4 文件加载器

Question

我正在使用angular-starter。

现在我正在尝试部署到测试服务器。我的问题是位于src/assets/img 的图像。

我的 Angular 4 代码（组件和视图）：

// Component
public ngOnInit() {
  this.logoUrl = require('../../assets/img/co-logo.png');
}

// View
<img flex src="{{logoUrl}}" alt="Logo">

到这里为止我没有任何问题。

我的问题是理解 webpack 的行为。

我已经安装了文件加载器，并将这段代码（并尝试了很多其他选项）添加到 webpack.common.js： 已尝试使用此选项：

{
  test: /\.(png|jpe?g|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: '/assets/img/',
        publicPath: '/',
        name: '[hash]_[name].[ext]',
      }
    }
  ],
}

输出看起来一点也不差，我明白了：

 » app  
  » dist  
   » assets  
    » img  
    - b1249ef43aea4c57bcc7782f6a0ebb99_co-logo.png

问题

加载页面时，如果我检查图像的 url，它只会检索到我：

/app/dist/01b401fa5bdbfdc4e3daf75d72fa76b9.png

我期待的是这样的：

/app/dist/assets/img/b1249ef43aea4c57bcc7782f6a0ebb99_co-logo.png

至少我已经尝试过使用以下参数：

publicPath: '/assets/img/'
name: '/assets/img/[hash]_[name].[ext]'

谁能帮我解决这个问题？从昨天开始我一直在努力解决这个问题：/

谢谢大家！

编辑：webpack code

Answer 1

在解决问题的同时让事情变得清晰和简单

1. 确保 webpack 配置有 output.path 指向 目标文件夹。我相信它的app 文件夹在你的情况下。请注意 output.path 采用绝对路径，即使用 path 模块。
2. 在file-loader 中取出publicPath，直到我们解决问题。
3. 使用file-loader 的outputPath 的相对路径，即assets/img

完成这些更改后，一切都会按预期进行。然后您可以根据需要尝试将publicPath 放回file-loader。

一般来说，我不会使用publicPath，除非我有不同的环境需要照顾。产品和开发。但这只是我。