Question

官方文档似乎暗示您需要复制webpack配置 - 一旦在测试之外使用，再次在karma.conf中使用。

// Karma configuration
module.exports = function(config) {
  config.set({
    webpack: {
    // same webpack config used externally
  },
};

然而，当我开始复制/粘贴工作webpack配置时，我开始出错。例如，ES6代码没有被编译（即使配置了babel）。公共块插件在发出错误时无法正常工作。 karma.conf如下所示：

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

有几件事：

在业力中使用主webpack配置似乎是一种惯用的做事方式。不幸的是，这种方法的一个问题是某些webpack插件似乎不适用于业力，例如，CommonsChunk和Define。
ES6未编译的问题与使用较旧版本的karma和karma-webpack有关。见https://github.com/webpack/karma-webpack/issues/129。

我的业力配置：

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,
   //....

将webpack与业力一起使用的正确模式是什么？

1 个答案: