file-loader funktioniert nicht für jpeg

Question

Ich versage es kläglich, Datei-Loader in Karma zu Testzwecken zu verwenden. Ich erhalte 404 Fehler, und wenn ich versuche, in Chrome zu debuggen, werden die Dateien nicht auf der Quellen-Registerkarte unter dev-tools angezeigt.

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

Nur wird nicht funktionieren.

Mein 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 : [] 
}; 

Mein 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

Sie npm_lifecycle_event verwenden können Test & Build Läufe zu unterscheiden. Verwenden Sie dann anstelle von file-loader url-loader in Tests. Limit hoch setzen "url-loader? Limit = 999999", Dann werden keine statischen Dateien erstellt und stattdessen base64-URLs verwendet.

Hoffe, das hilft.

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