file-loader не работает для jpeg

Question

Я терплю неудачу использовать файловый загрузчик в карме для тестирования. Я получаю 404 ошибки, и при попытке отладки в Chrome файлы не будут отображаться на вкладке источников в dev-tools.

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

Просто не сработает.

Моего 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 : [] 
}; 

Мой 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

Вы можете использовать npm_lifecycle_event различать тест & пробеги сборки. Затем вместо использования файлового загрузчика используйте url-loader в тестах. Установить предел высокий «url-loader? Limit = 999999», , тогда статические файлы не создаются, а вместо него используются URL-адреса base64.

Надеюсь, это поможет.

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