file-loader not working for jpeg

Question

I am failing miserably to use file-loader in karma for purposes of testing. I get 404 errors, and when trying to debug in Chrome, the files wouldn't show in the sources tab under dev-tools.

require("file-loader?name=img/[name].[ext]?!./testdata/sad.jpg");

Just won't work.

My webpack.config.js:

module.exports = {
    entry   : './src/client/index.js',
    output  : {
        filename: 'bundle.js',
        path    : './dist'
    },
    resolve : {
        extensions: ['.js', '.jsx', '.css', '.scss', '']
    },
    module  : {
        loaders: [
            {
                test   : /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader : 'babel-loader',
                query  : {
                    presets: ['es2015']
                }
            },
            {
                test: /\.jpg$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins : []
};

My karma.conf.js:

const _            = require('lodash');
const RewirePlugin = require("rewire-webpack");
let webpackConfig  = _.clone(require('./webpack.config.js'), true);
webpackConfig.plugins.push(new RewirePlugin());

module.exports = function (config) {
    config.set(
        {
            basePath: './src/',
            frameworks: ['mocha'],
            files: [{pattern: '**/*.test.js'}],
            exclude: [],
            preprocessors: {
                '**/*.js': ['webpack']
            },
            webpack: {
                plugins: webpackConfig.plugins,
                module : webpackConfig.module,
                resolve: webpackConfig.resolve
            },
            reporters: ['progress', 'mocha'],
            port: 9876,
            colors: true,
            logLevel: config.LOG_INFO,
            autoWatch: false,
            browsers: ['Chrome'],
            singleRun: true,
            concurrency: Infinity
        })
};

Answer 1

You can use npm_lifecycle_event to distinguish test & build runs. Then instead of using file-loader, use url-loader in tests. Set limit high "url-loader?limit=999999", then no static files are created and base64 urls are used instead.

Hope this helps.

var loader;
if (process.env.npm_lifecycle_event === 'test') {
   loader = {
            test: /\.jpg$/,
            loader: 'url-loader?limit=999999'
        };
} else {
  loader = {
            test: /\.jpg$/,
            loader: 'file-loader'
        };
}