webpack - 文件加载器不适用于 jpeg

Question

为了测试的目的，我在 karma 中使用文件加载器失败了。我收到 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”，则不会创建静态文件，而是使用 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'
        };
}