Aurelia JS веб-пакет скелет относительный путь активов

Question

У меня есть приложение Aurelia с такой файловой структурой. я использую Aurelia каркасно-машинопись-Webpack 1.0.0

|-- assets 
    |-- images 
     |-- imageA.jpg 
     |-- imageB.jpg 
|-- src 
    |-- app.ts 
    |-- main.ts 
    |--views 
     |-- viewA.ts 
     |-- viewA.html 

Сейчас в viewA.html, если я хочу, чтобы связать изображение, я делаю это с абсолютным путем:

<img src="/assets/images/imageA.jpg"> 

Но на производстве приложение будет по адресу: http://domain.com/app/, , поэтому абсолютный путь не является вариантом.

Если я использую относительный путь в среде dev, aurelia-loader-webpack throw не может разрешить ошибку.

<img src="assets/images/imageA.jpg"> 

Module not found: Error: Can't resolve './assets/images/imageA.jpg' in '/app/src/views' 
@ ./src/views/viewA.html 1:191-213 
@ ./src ^\.\/.*$ 
@ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js 

Есть ли способ настроить путь в среде разработки, чтобы ресурсы загружались из правой папки? Или изменить img src, чтобы пережить, когда я запустил build: prod?

В конце концов, что я хотел бы сделать, это использовать это в моем шаблоне:

<img src="imageA.jpg"> 

Это будет трансформироваться в абсолютных/активов/изображений/на запуск Dev окр, и относительные активы/изображения/на сборки прод.

Я думаю, это то, что я могу сделать в webpack.config.ts, но не смог найти способ.

EDIT, вот это WebPack погрузчики

{ loaders: 
    [ { test: /\.tsx?$/, 
     loader: 'awesome-typescript', 
     exclude: [Object] }, 
    { test: /\.html$/, loader: 'html', exclude: [Object] }, 
    { test: /\.scss$/i, 
     loaders: '/App/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":0,"remove":true,"notExtractLoader":"style"}!css!sass' }, 
    { test: /\.css$/i, 
     loaders: '/App/node_modules/extract-text-webpack-plugin/loader.js?{"id":2,"omit":0,"remove":true,"notExtractLoader":"style"}!css' }, 
    { test: /\.(png|gif|jpg)$/, loader: 'url', query: [Object] }, 
    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url', 
     query: [Object] }, 
    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url', 
     query: [Object] }, 
    { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file' } 
] } 

Answer 1

загружаю html с html-loader (https://github.com/webpack/html-loader) и использовать url-loader

module: { 
    loaders: [ 
    ... 
    { test: /\.html$/, loader: 'html' }, 
    { test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' }, 
    ... 
    ] 
} 

Answer 2

Я думаю, что у меня была такая же проблема. Я также использовал скелет веб-сайта Aurelia. Мое решение было использовать html-loader (который уже был предложен), но и удалить следующий фрагмент кода из моей WebPack конфигурации:

html(<any>{overrideOptions: { 
    metadata: Object.assign(get(this, 'metadata', {}), {baseUrl: baseUrl}) 
}}), 

Это происходит потому, что Аурелия WebPack скелет использует простой Webpack для настройки Webpack. По умолчанию вышеуказанный фрагмент кода из простого webpack загружает все html-файлы, но мы хотим сами загрузить эти html-файлы и добавить дополнительную конфигурацию. Поскольку webpack переопределяет повторяющиеся фрагменты конфигурации, моя часть конфигурации html-loader (которая была установлена ​​выше указанной части кода) была проигнорирована.

Теперь, когда ваш проект использует свой загрузчик (а не просто WebPack один), нужно установить некоторые дополнительные опции к html-loader:

{ 
    test: /\.html$/, 
    loader: 'html-loader', 
    exclude: [path.join(__dirname, 'index.html')], 
    options: { 
     attrs: false 
    } 
} 

исключающая линия игнорирует файл index.html (это нормально сделано в легкой WebPack HTML загрузчика конфигурации) и опции отключить обработку тегов атрибутов, как вы хотите, чтобы ваш базовый элемент HTML5 правильно предварять относительный URL,:

полностью отключить обработку тегов атрибута (например, если вы обработка изображений g на стороне клиента), вы можете передать attrs = false.

Необходимо убедиться, что ваш атрибут src img относительный! (он не должен начинаться с)

Выполнение всего этого означает, что вы можете удалить зависимую от вашего проекта, поскольку она больше не используется.

Надеюсь, это поможет!