Webpack angular 4 文件加载器

Question

现在我正在尝试部署到测试服务器。我的问题是位于 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

解决问题时的一些事情可以使事情变得清晰和简单

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

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

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

Webpack angular 4 文件加载器

Webpack angular 4 file-loader

javascript

webpack

webpack-file-loader

angular