Почему webpack пытается загрузить изображения?

Question

[Максим Иванов]

Я использую HTML загрузчик для загрузки непосредственно в HTML файл JS. В контроллере я пишу, что шаблон будет такой то HTML-файл

class BloodController {

    constructor(storageService, httpService){

    }

}

export const BloodComponent = {
  template: require("./blood.html"), // The template in which the images are connected
  controller: ['storageService', 'httpService', BloodController] 
};

blood.html

<div class="row">  

    <div class="col s6">
        <img src="img/omron2.png" alt="">
    </div>

    <div class="col s6">
        <img src="img/omron3.png" alt="">
    </div>

</div>

webpack.config.js

module: {
    loaders: [
        { // используем ES6 to ES5
          exclude: /(node_modules|bower_components)/,
          test: /\.js$/,
          loader: 'babel?presets[]=es2015&compact=true',
        },
        {
          exclude: /(node_modules|bower_components)/,
          test: /\.html$/,
          loader: 'html'
        },
        { 
          exclude: /(node_modules|bower_components)/,
          test   : /\.scss$/,
          loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
        }
    ]
  }

source for webpack

splincode@splincode:~/Develop/omron/source$ tree
.
├── js
│   ├── app.module.js
│   ├── components
│   │   ├── blood
│   │   │   ├── blood.component.js
│   │   │   └── blood.html
│   └── services
│       ├── httpService.js
│       └── storageService.js
└── my-index.ejs

build (Уже по умолчанию в папке img находятся картинки)

splincode@splincode:~/Develop/omron/webapp$ tree
.
├── public
│   ├── css
│   │   └── materialize.min.css
│   ├── img
│   │   ├── favicon.png
│   │   ├── omron2.png
│   │   ├── omron3.png
│   ├── index.html
│   └── js
│       ├── app.js
├── server.js

Но когда я запускаю webpack

ERROR in ./source/js/components/blood/blood.html
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/omron2.png in /home/splincode/Develop/omron/source/js/components/blood
 @ ./source/js/components/blood/blood.html 1:275-302

ERROR in ./source/js/components/blood/blood.html
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/omron3.png in /home/splincode/Develop/omron/source/js/components/blood
 @ ./source/js/components/blood/blood.html 1:389-416
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

Что не так?

Answer 1

[Константин Громов]

Потому что html-loader подразумевает работу в связке с file-loader (подробности на примере схожего лоадера). Если подразумевается обычный импорт текста, то замените его на raw-loader.

Answer 2

[Олег Драпеза]

Добрый день!

Документация на html-loader

By default every local <img src="image.png"> is required (require('./image.png')). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).

То есть, атрибут src автоматически считается вызовом изображения.

Что бы изображение нашлось, во-первых в ваш source добавьте папку с изображениями, во-вторых начинайте пути с '/' (пример src="/img/omron2.png"), и изображения webpack будет искать относительно настройки:

resolve: {
    root: path.resolve(__dirname, 'source')
}

В папку build не нужно добавлять изображения вручную, воспользуйтесь file-loader или url-loader, они позволяют настроить и путь, например папка img внутри build, пример:

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader:'file',
    query: {
        name: 'img/[name].[ext]'
    }
}