Processing HTML templates fail when using Webpack function config.

Operating System: OSX
Node Version: 10.10
NPM Version: 6.4.1
webpack Version: 3.12.0
karma-webpack Version: 3.0.5

Expected Behavior

Using:

karma ^3.1.1
webpack ^3.12.0
jasmine ^ 3.3.0 Running karma start karma.conf.js --single-run should run test correctly.

Actual Behavior

When karma is compiling the source, I assume using webpack, this error is returned:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!-- <div modal="ModalClass">
|     <div class="modal-header">
|       <h3 class="modal-title">Some Title</h3>
 @ ./project/static/scripts/applications/app.js 68:22-69
 @ ./project/static/scripts/test-context.js

And it shows for every template imported as


import template from './html/template-name.html';

Code

A webpack config such as:

// webpack.config.js
module.exports = function(env, arg){
    return {
        devtool: 'source-map',
        module: {
            rules: [
                {
                     test: /\.js$/,
                     exclude: /node_modules/,
                     options: {
                         presets: ['es2015'],
                         plugins: ['angularjs-annotate'],
                     },
                },
                {
                     test: /\.html$/,
                     exclude: /node_modules/,
                     use: [{
                         { loader: 'html-loader' }
                     }],
                },
                {
                     test: /\.(s?)css$/,
                     exclude: /node_modules/,
                     use: [{
                         loader: 'css-loader',
                     },
                     {
                          loader: 'sass-loader'
                     }],
                },
            ],
        },
    };
};

And a karma config such as:

//karma.config.js
const webpackConfig = require('./webpack.config.js')

module.exports = function(config){
    config.set({
        basePath: './',
        files: [
            './project/static/scripts/test-context.js',
        ],
        frameworks: ['jasmine'],
        browsers: ['FirefoxHeadless', 'ChromeHeadless'],
        plugins: [
            'karma-webpack',
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine',
        ]
        preprocessors: {
            './project/static/scripts/test-context.js: ['webpack'],
            './project/static/scripts/**/*.spec.js: ['webpack'],
        }
        webpack: {
            devtool: webpackConfig.devtool,
            resolve: webpackConfig.resolve,
            module: webpackConfig.module,
           plugins: webpackConfig.plugins,
            externals: webpackConfig.externals
        },
    });
};

How Do We Reproduce?

With a test-context.js file such as:

import angular from 'angular';

import mocks from 'angular-mocks';
import './project/applications/app.js'
let context = require.context('.', true, /\.spec\.js/);
context.keys().forEach(context);

And importing at least one html template:

import template from './html/template-name.html';

And running karma start karma.conf.js --single-run

The curious thing is that if I change the webpack configuration to export an object instead of a function it works. It only fails when using

module.exports = function(env, arg){}

for webpack config. Any idea why this is happening?

codymikol / karma-webpack