Image loading from root using relative path using--> webpack - file-loader - Angularjs

Question

I'm loading images on my HTML, CSS and JS using Webpack.

My Config is :

{
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    entry: [
        'angular', './src/lib.js', './src/app.js',
    ],
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
},
module: {
    rules: [{
        test: /\.(jpe?g|png|gif|svg)$/i,
         loader: ['file-loader?name=[name].[ext]&outputhPath=images/&publicPath=images/'],
    },{
        test: /\.css|scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader']
        })
    },{
        test: /\.html$/,
        exclude: [
            path.join(__dirname, '/src/index.html')
        ],
        use: [
            { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src'))},
            { loader:  'html-loader'},
            ]
        }],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Project Demo,
            minify: {
                collapseWhitespace: true,
            },
            cache: true,
            hash: true,
            inject: true,
            filename: './index.html',
            template: 'src/index.html'
        }),
        new ExtractTextPlugin({
            filename: "app.css",
            disable: false,
            allChunks: true
        })
    ],
    devServer: {
        port: 9000
    },
};

    module.exports = config;
}

my Project Folder Structure :

- dist
    - images [folder]
    - index.html
    - app.css
    - main.js 
- node_modules
- src
    - images
    - javascripts/pages/HTML Files
    - stylesheets
    - app.js (BootStrapping angular)
    - lib.js 
    - index.html
- webpack.config.js
- package.js

I just want to refer include images from HTML, CSS and JS (Image location atleast in JS) but currently all my image paths are relative to image folder to template file.

In this case, configuring path for every single HTML and JS file is like hell.

so my qustions is : How can I have generic path so that in HTML, JS or CSS- I'll just refer image name in any file and generic path will find that out in images folder.

Help is most appreciated !!!

Answer 1

Try to use the resolve.alias property, to define an alias to your assets:

resolve: {
  alias: {
    images: path.resolve(__dirname, 'src/images')
  }
},

Then you should be able to reference your images in Html like:

<img src="~images/some_image.png" alt="image alt text" />

Your css-loader (or html-loader, I am not quite sure about that) will then resolve the correct path.

EDIT

Edit the css loader like this:

use: ExtractTextPlugin.extract({
  fallback: "style-loader",
  use: [
    {loader: 'css-loader?url=false'}
  ]
})

Forgot this. the url=false parameter tells the css-loader not to handle urls directly.