karma-webpack does not respect webpack mode = "production"

[Blackbaud-JasonBodnar]

My webpack.config.js:

const path = require('path');

module.exports = {
  mode: "production",
  entry: './src/index.tsx',
  output: {
    clean: true,

    // problem point here. originally this was "/dist", but our OSS pipeline looks in "/dist/bundles/"
    // for assets to publish
    path: path.join(__dirname, '/dist/bundles')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      }
    ],
  },
  resolve: {
    extensions: ['.tsx', 'css'],
  }
};

When I run npx webpack build, as expected I get:

$ ls dist/bundles/
main.js

My karma.config.js:

const webpackConfig = require('./webpack.config.js');
delete webpackConfig.entry;
webpackConfig.mode = 'production';

module.exports = function (config) {My `webpack.config.js`:

const path = require('path');

module.exports = { mode: "production", entry: './src/index.tsx', output: { clean: true,

// problem point here. originally this was "/dist", but our OSS pipeline looks in "/dist/bundles/"
// for assets to publish
path: path.join(__dirname, '/dist/bundles')

}, module: { rules: [ { test: /.tsx?$/, use: 'ts-loader', exclude: /node_modules/, }, { test: /.s[ac]ss$/i, use: [ // Creates style nodes from JS strings "style-loader", // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], } ], }, resolve: { extensions: ['.tsx', 'css'], } };

When I run `npx webpack build`, as expected I get:

$ ls dist/bundles/ main.js

My `karma.config.js`:

const webpackConfig = require('./webpack.config.js'); delete webpackConfig.entry; webpackConfig.mode = 'production';

module.exports = function (config) { 'use strict';

config.set({ frameworks: ['webpack', 'jasmine', 'karma-typescript', 'mocha'], files: [ { pattern: 'src//*.tsx', included: false }, 'src/*/.ts', { pattern: 'dist//*.js', included: false } ], preprocessors: { './src/index.tsx': 'webpack', '*/.ts': 'karma-typescript', }, reporters: ['mocha', 'karma-typescript'], singleRun: true, webpack: webpackConfig }); };

When I run `npx karma start` I get:

$ ls dist/bundles/ commons.js index.5926340.js runtime.js

Why does karma-webpack not respect the production mode in the webpack config? I've also tried leaving it out and adding `webpackConfig.mode = 'production` to the karma config (which I how I'd prefer to do it) but that doesn't work either.

  'use strict';

  config.set({
    frameworks: ['webpack', 'jasmine', 'karma-typescript', 'mocha'],
    files: [
      { pattern: 'src/**/*.tsx', included: false },
      'src/**/*.ts',
      { pattern: 'dist/**/*.js', included: false }
    ],
    preprocessors: {
      './src/index.tsx': 'webpack',
      '**/*.ts': 'karma-typescript',
    },
    reporters: ['mocha', 'karma-typescript'],
    singleRun: true,
    webpack: webpackConfig
  });
};

When I run npx karma start I get:

$ ls dist/bundles/
commons.js  index.5926340.js  runtime.js

Why does karma-webpack not respect the production mode in the webpack config? I've also tried leaving it out and adding webpackConfig.mode = 'production to the karma config (which I how I'd prefer to do it) but that doesn't work either.

[codymikol]

Why do you want to use production mode?

[Blackbaud-JasonBodnar]

I want to test the resulting js file. The plan was to add a script tag to the test document dom and set the src to the js file. I'd prefer to do it with the production js file.

[codymikol]

As karma is now deprecated and coming up on EOL, we are no longer planning on any significant enhancements to this project and are instead going to focus on security updates, stability, and a migration path forward as karma's lifecycle comes to an end.

Thank you for supporting and using this project!