How do I get karma to set webpack's mode to development?

Question

When I run karma, I'm getting the following warning:

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

I tried adding mode: 'development' to my webpack-test.config.js file as suggested in the link above, but not only did that fail to make any difference, Intellij IDEA complained:

webpack: Property 'mode' is not allowed

My unit testing does run anyway, but I'd like to get rid of this warning. Any help is much appreciated.

Here's my webpack-test.config.js file:

const path = require('path');
const webpack = require('webpack');

const ROOT = path.resolve( __dirname, 'src' );

module.exports = {
  mode: 'production',
  context: ROOT,

  resolve: {
    extensions: ['.ts', '.js'],
    modules: [
      ROOT,
      'node_modules'
    ]
  },

  module: {
    rules: [
      // PRE-LOADERS
      {
        enforce: 'pre',
        test: /\.js$/,
        use: 'source-map-loader'
      },

      // LOADERS
      {
        test: /\.ts$/,
        exclude: [ /node_modules/ ],
        use: 'ts-loader'
      }
    ]
  },

  devtool: 'cheap-module-source-map',
  devServer: {}
};

My karma.conf.js :

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-webpack')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    files: [
      'spec.bundle.js'
    ],
    preprocessors: {
      'spec.bundle.js': ['webpack']
    },
    webpack: require('./webpack-test.config')
  });
};

And spec.bundle.js :

const testsContext = require.context("./", true, /\.spec\.ts$/);
testsContext.keys().forEach(testsContext);

I'm launching karma via:

karma start ./karma.conf.js

Answer 1

I stumbled on this by trial and error, replacing:

webpack: require('./webpack-test.config')

...in karma.conf.js with:

webpack: {
  mode: 'development'
}

...and the warning is gone. Not only that, I discovered that I really didn't need my webpack-test.config , nor the two npm modules I'd loaded to support it, source-map-loader and ts-loader .

If someone really did want to both specify mode: 'development' and specify a particular webpack config file, I'm not sure how they'd do it. I experimented with a few options and couldn't find anything that would work. This stuff doesn't have great documentation :(

Answer 2

You shouldn't have to require the webpack package in your config file. Not sure if that is causing Intellij to get confused or not, but mode is certainly a valid property of webpack.

https://webpack.js.org/concepts/mode/

I also noticed that in your karma.conf.js file, the line webpack: require('./webpack-test.config') is missing the .js extension for the config file. That may be why your config settings are not reflected in your karma test.