Aurelia JS webpack skeleton relative assets path

Question

I have an Aurelia application with a file structure like this. I m using aurelia skeleton-typescript-webpack 1.0.0

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

Right now in viewA.html if I want to link an image, I do it with an absolute path :

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

But on production, the app will be at : http://domain.com/app/, so absolute path is not an option.

If I use a relative path on dev environment, aurelia-loader-webpack throw a can't resolve error.

<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

is there a way to setup up the path on dev environnement so assets are loaded from the right folder ? Or to change the img src to relive when i run build:prod ?

Eventually What I'd like to do is use this in my template:

<img src="imageA.jpg">

That will get transformed on absolute /assets/images/ on run dev env, and relative assets/images/ on build prod.

I guess that's something that I can do in webpack.config.ts, but couldn't find a way.

EDIT, here is the webpack loaders

{ 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 load html with html-loader (https://github.com/webpack/html-loader) and use url-loader

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

Answer 2

I think I had the same issue. I was also using the Aurelia webpack skeleton. My solution was to use the html-loader (which was already suggested), but also remove the following piece of code from my webpack config:

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

This is because the Aurelia webpack skeleton uses easy webpack to configure webpack. By default the above piece of code from easy webpack loads all html files, but we want to load these html files ourselves and add some extra configuration. Since webpack overrides duplicate pieces of config, my piece of html-loader config (which was being set above the above piece of code was set) was ignored.

Now that your project is using your loader (and not easy webpack's one) you need to set some extra options to the html-loader:

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

The exclude line ignores your index.html file (this was normally done in the easy webpack html loader config) and the options is disabling tag-attribute processing as you want your HTML5 base element to prepend relative url's correctly:

To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in attrs=false.

Lastly is to make sure that your img src attribute is relative! (it should not start with a /)

Doing all this means you can remove the @easy-webpack/config-html dependency from your project as it is not being used any more.

Hope this helps!