Typescript使用karma-webpack编译两次

Question

我有简单的打字稿/反应项目。为了进行测试，我使用了Karma和webpack来编译.ts和.tsx文件。但是在控制台中，我注意到编译运行了两次！

我想知道对此我该怎么办？

这就是我在控制台中看到的

您还可以看到，源文件夹中只有1个.tsx文件。如果我开始添加更多文件，这将导致我的项目测试时间猛增，因为每个入口点都要编译两次。

karma.conf.js

module.exports = (config) => {
  config.set({
    // ... normal karma configuration
    files: [
      // all files ending in ".spec"
      {
        pattern: 'src/*.spec.ts', 
        watched: false, 
        included: false,
        served: true
      },
      {
        pattern: 'src/**/*.spec.tsx', 
        watched: false, 
        included: false,
        served: true
      }
      // each file acts as entry point for the webpack configuration
    ],

    preprocessors: {
      // add webpack as preprocessor
      'src/*.spec.ts': ['webpack'],
      'src/**/*.spec.tsx': ['webpack']
    },

    webpack: {
      // karma watches the test entry points
      // (you don't need to specify the entry option)
      // webpack watches dependencies

      // webpack configuration
    },

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: 'errors-only'
    }
  })
}

webpack.conf.js

// For instructions about this file refer to
// webpack and webpack-hot-middleware documentation
var webpack = require('webpack');
const glob = require('glob');
const path = require('path');

var CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const extractSass = new ExtractTextPlugin({
    // TODO: filename: "/assets/css/[name].css?v=[contenthash]"
    filename: "./assets/css/app.css"
});

module.exports = {
    entry: {
        app: './src/app.tsx',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json', '.scss', '.css'],
        modules:['./src', './tests', './node_modules']
    },
    plugins: [
        extractSass,
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false
            },
            mangle: true
        }),
        new CopyWebpackPlugin([
            {
                from: './src/assets',
                to: './assets'
            }
        ])
    ],
    devtool: "#eval-source-map",
    module: {
        rules: [
            {
                test: [/\.scss$/, /\.css$/],
                use: extractSass.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader",
                        options: {
                            includePaths: glob.sync('node_modules').map((d) => path.join(__dirname, d))
                        }
                    }]
                })
            },
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                use: [{ loader: 'ts-loader' }, // "use" - multiple loaders
                {
                    loader: 'tslint-loader',
                    options: {
                        //                        emitErrors: true,
                        noRequireVar: false,
                        fix: true,
                        failOnHint: false
                    },
                }]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    { loader: 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]' },
                    { loader: 'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false',
                    // REF: https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-326210929
                      options: {
                        gifsicle: {
                            interlaced: true
                        }
                      }
                    }
                ]
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                use: "source-map-loader"
            },
            {
                enforce: 'pre',
                test: /\.ts?$/,
                use: "source-map-loader"
            }
        ]
    }
};