👏 You can access karma-webpack package with using karmaWebpack variable in browser devtools!
Use webpack with karma

code/package/bundle size

bundle minified
bundle gzipped

npm node deps test coverage chat

Karma Webpack

Use webpack to preprocess files in karma


npm npm i -D karma-webpack

yarn yarn add -D karma-webpack



module.exports = (config) => {
    // ... normal karma configuration

    // make sure to include webpack as a framework
    frameworks: ['mocha', 'webpack'],
    plugins: [

    files: [
      // all files ending in ".test.js"
      // !!! use watched: false as we use webpacks watch
      { pattern: 'test/**/*.test.js', watched: false }

    preprocessors: {
      // add webpack as preprocessor
      'test/**/*.test.js': [ 'webpack' ]

    webpack: {
      // karma watches the test entry points
      // Do NOT specify the entry option
      // webpack watches dependencies

      // webpack configuration

Default webpack configuration

This configuration will be merged with what gets provided via karma's config.webpack.

const defaultWebpackOptions = {
  mode: 'development',
  output: {
    filename: '[name].js',
    path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
  stats: {
    modules: false,
    colors: true,
  watch: false,
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 1,
  plugins: [],

How it works

This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.

The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.

Webpack typescript support

By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.

If you have a different need you can override by settig webpack.transformPath

// this is the by default applied transformPath
webpack: {
  transformPath: (filepath) => {
      // force *.js files by default
      const info = path.parse(filepath);
      return `${path.join(info.dir,}.js`;

Source Maps

You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.

npm i -D karma-sourcemap-loader

And then add it to your preprocessors.


preprocessors: {
  'test/test_index.js': [ 'webpack', 'sourcemap' ]

And tell webpack to generate sourcemaps.


webpack: {
  // ...
  devtool: 'inline-source-map'


Ryan Clark

Cody Mikol

April Arcus

Previous Maintainers

Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil
Joshua Wiens Will Farley Daniela Valero
Jonathan Trang Carlos Morales
🔎Explore Package🔎CDN Script