Was ist das richtige Muster für die Verwendung von Webpack mit Karma?

Question

Die offiziellen Dokumente scheinen zu implizieren, dass du die Webpack-Konfiguration duplizieren musst - einmal außerhalb der Tests und einmal innerhalb der karma.conf.

Als ich jedoch anfing, die funktionierende Webpack-Konfiguration zu kopieren/einzufügen, fing ich an, Fehler zu bekommen. Zum Beispiel wurde der ES6-Code nicht übertragen (obwohl babel konfiguriert wurde). Das Commons Chunk-Plugin würde nicht funktionieren, da es einen Fehler gab. Die karma.conf ist unten dargestellt:

const webpack = require('webpack'); 

module.exports = function(config) { 
config.set({ 

// base path that will be used to resolve all patterns (eg. files, exclude) 
basePath: '', 

files: [ 
    'test.webpack.js' //just load this file 
], 
preprocessors: { 
    'test.webpack.js': [ 'webpack', 'sourcemap' ] //preprocess with webpack and our sourcemap loader 
}, 
webpack: { 
    module: { 
    loaders: [ 
     { 
     test: /\/js\/.+\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader", 
     query: { 
      presets: ['es2015', 'react'], 
      plugins: [ 
      'transform-es2015-destructuring', 
      'transform-object-rest-spread' 
      ] 
     } 
     }, 
    ], 
    }, 

    resolve: { 
    modulesDirectories: ['node_modules'], 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     filename: "commons.js", 
     name: "commons" 
    }), 
    new webpack.ProvidePlugin({ 
     'Promise': 'bluebird', 
    }) 
    ], 
    devtool: 'inline-source-map' 
}, 
}; 

Answer 1

Es gibt mehrere Dinge:

1. die Haupt webpack config in Karma Mit scheint eine idiomatische Weg, Dinge zu tun zu sein. Leider besteht ein Problem mit diesem Ansatz darin, dass bestimmte Webpack-Plugins im Karma nicht funktionieren, zum Beispiel CommonsChunk und Define.
2. Das ES6-nicht-kompilierte Problem bezog sich auf die Verwendung einer älteren Version von Karma und Karma-Webpack. Siehe https://github.com/webpack/karma-webpack/issues/129.

Mein Karma config:

const webpackConfig = require('./webpack.config'); 
const webpack = require('webpack'); 

webpackConfig.entry = undefined; 
webpackConfig.output = undefined; 
// tell webpack to ignore these files 
webpackConfig.module.loaders.push([ 
{ 
    test: /\.(jpe?g|png|gif|svg|map|css|std|indent|html|txt)$/i, 
    loader: 'ignore-loader', 
}, 
]); 
// karma is actually very brittle. The commons chunk plugin as well as the define plugin break it, so we 
// disable these 
webpackConfig.plugins = webpackConfig.plugins 
    .filter(p => !(p instanceof webpack.optimize.CommonsChunkPlugin)) 
    .filter(p => !(p instanceof webpack.DefinePlugin)); 
webpackConfig.devtool = 'inline-source-map'; 

module.exports = function(config) { 
config.set({ 
    webpack: webpackConfig, 
    //....