1

テスト目的でカルマでファイルローダーを使用することに惨めに失敗しています。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
        })
};
4

1 に答える 1

0

npm_lifecycle_eventを使用して、テストとビルドの実行を区別できます。次に、file-loader を使用する代わりに、テストで 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'
        };
}
于 2017-01-12T06:52:48.927 に答える