文件加載器不能用於jpeg

Question

我很難在文件加載器中使用文件加載器進行測試。我收到404錯誤，並且在Chrome中嘗試調試時，這些文件不會顯示在開發工具下的sources選項卡中。

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」， 則不會創建靜態文件，而是使用base64 url​​。

希望這會有所幫助。

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