webpack dllplugin how to use with karma?

Question

I am trying to use a DLLReferencePlugin in my karma tests and I'm not entirely sure how to have it work.

I've placed vendors.js and vendors-manifest.json in src/static/ The dll was generated with libraryTarget=var and it works in my dev and production webpack builds. My dev / production builds use an html file with a script tag pointing to "vendors.js" at the root path. The dev / production builds copy all files in the static folder to the destination folder. Hence the script tags can find vendors.js.

However I get an error from PhantomJS: ReferenceError: Can't find variable: vendors when running my test. I'm wondering if it cannot find the vendors.js script tag?

How do I use vendors.js in my karma config if it comes from a DLL Plugin??

I'm new to karma so any guidance will be greatly appreciated.

I've tried a number of things without results, including putting require('vendors.js') in my test entry file, setting externals for vendors to be true, using a resolve alias, but since I have little knowledge of karma it feels like I am pretty much shooting in the dark. Therefore any help will be greatly appreciated.

My karma config is below. This comes from the starter kit I am using. My test file is the same from that starter kit as well. Please let me know if you need any other information to assist. Thanks!

const karmaConfig = {
  basePath : '../', // project root in relation to bin/karma.js
  files    : [
    {
      pattern  : `./test-bundler.js`,
      watched  : false,
      served   : true,
      included : true
    }
  ],
  singleRun     : !argv.watch,
  frameworks    : ['mocha'],
  reporters     : ['mocha'],
  preprocessors : {
    [`/test-bundler.js`] : ['webpack']
  },
  browsers : ['PhantomJS'],
  webpack  : {
    devtool : 'cheap-module-source-map',
    resolve : Object.assign({}, webpackConfig.resolve, {
      alias : Object.assign({}, webpackConfig.resolve.alias, {
        sinon : 'sinon/pkg/sinon.js'
      })
    }),
    plugins : webpackConfig.plugins,
    module  : {
      noParse : [
        /\/sinon\.js/
      ],
      loaders : webpackConfig.module.loaders.concat([
        {
          test   : /sinon(\\|\/)pkg(\\|\/)sinon\.js/,
          loader : 'imports?define=>false,require=>false'
        }
      ])
    },
    // Enzyme fix, see:
    // https://github.com/airbnb/enzyme/issues/47
    externals : Object.assign({}, webpackConfig.externals, {
      'react/addons'                   : true,
      'react/lib/ExecutionEnvironment' : true,
      'react/lib/ReactContext'         : 'window'
    })
  },
  webpackMiddleware : {
    noInfo : true
  },
  coverageReporter : {
    reporters : config.coverage_reporters
  }
}

if (config.globals.__COVERAGE__) {
  karmaConfig.reporters.push('coverage')
  karmaConfig.webpack.module.preLoaders = [{
    test    : /\.(js|jsx)$/,
    include : new RegExp(config.dir_client),
    loader  : 'babel',
    query   : Object.assign({}, config.compiler_babel, {
      plugins : (config.compiler_babel.plugins || []).concat('istanbul')
    })
  }]
}

Answer 1

Answering my own question.. Jeeze all it takes is reading some docs sometimes...

i put this in the files entry for my karma config:

files: [{
  pattern : `./src/static/vendors.js/`,
  watched : false,
  served  : true
},
...]