Aurelia JS webpack skeleton relative Vermögenswerte Pfad

Question

Ich habe eine Aurelia-Anwendung mit einer Dateistruktur wie folgt. Ich verwende aurelia Skelett-Typoskript-webpack 1.0.0

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

Gerade jetzt in viewA.html wenn ich ein Bild verknüpfen möchten, ich habe es mit einem absoluten Pfad zu tun:

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

Aber auf der Produktion wird die App unter: http://domain.com/app/, so absoluter Weg ist keine Option.

Wenn ich einen relativen Pfad auf Dev-Umgebung verwenden, kann Aurelia-Loader-Webpack einen Fehler nicht beheben.

<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 

Gibt es eine Möglichkeit, den Pfad auf Dev Environment einzurichten, so dass Assets aus dem richtigen Ordner geladen werden? Oder um den img src zu ändern, wenn ich build: prod laufen lasse?

Schließlich Was ich möchte, ist zu tun, verwenden Sie diese in meiner Vorlage:

<img src="imageA.jpg"> 

Das auf absolute/assets/images/auf Lauf dev env umgewandelt wird erhalten, und die relative assets/images/auf Build prod.

Ich denke, das ist etwas, was ich in webpack.config.ts tun kann, konnte aber keinen Weg finden.

EDIT, hier ist der webpack Lader

{ 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

I html mit html-loader (https://github.com/webpack/html-loader) laden und url-loader

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

Answer 2

Ich glaube, ich hatte das gleiche Problem verwenden. Ich benutzte auch das Aurelia-Webpack-Skelett. Meine Lösung war die html-loader zu verwenden (die bereits vorgeschlagen wurden), sondern auch das folgende Stück Code aus meiner webpack Config entfernen:

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

Dies liegt daran, das Aurelia WebPACK Skelett leicht webpack verwendet webpack zu konfigurieren. Standardmäßig lädt der obige Code von easy webpack alle HTML-Dateien, aber wir wollen diese HTML-Dateien selbst laden und zusätzliche Konfigurationen hinzufügen. Da webpack doppelte Konfigurationsdateien außer Kraft setzt, wurde mein Stück html-loader config (das über dem obigen Code festgelegt wurde) ignoriert.

Nun, da Ihr Projekt Ihren Lader verwendet (und nicht einfach webpack ist ein) Sie benötigen einige zusätzliche Optionen zum html-loader einzustellen:

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

Die ausschließen Linie Ihre Datei index.html ignoriert (dies war normalerweise korrekt relativ URLs vorangestellt wird in dem einfach webpack html loader Config gemacht) und die Optionen werden deaktivieren tag-Attribut Verarbeitung, wie Sie Ihr HTML5 Basiselement wollen:

um tag-Attribut Verarbeitung vollständig zu deaktivieren (zum Beispiel, wenn Sie Bilder werden geladen g auf der Clientseite) können Sie attrs = false übergeben.

Schließlich ist sicherzustellen, dass Ihr img src Attribut relativ ist! (es sollte nicht mit einem / starten)

All dies bedeutet, dass Sie die @easy-webpack/config-html Abhängigkeit von Ihrem Projekt entfernen können, da es nicht mehr verwendet wird.

Hoffe, das hilft!