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.

Answer 2

Ok - I've figured it out that how to setup common images path so images can be loaded from any HTML, JS or CSS in your project and just need to give same public path at every instance.

Changes needed is that :

1. In Webpack.config.js file, We need to add new Plugins

   new CopyWebpackPlugin([{
       from: './src/images',
       to: 'images'
   }]),
   

2. In Webpack.config.js only - We need to setup publicPath in output section as :

   output: {
             path: path.join(__dirname, 'mcaid'),
             filename: 'bundle.js',
             publicPath: '/',     <----- this is been added
   },
   

3. In HTML, JS or CSS File, you can refer images like :

   <img src="/images/some_Image_file.png"/>
   

/images in src is -- '/' is publicPath and 'images' is images from src folder for 'dev' and 'images' from 'dist' for 'prod' build.