如何使用带有业力的 webpack 多个条目？答案

【问题标题】：How to use webpack multiple entries with karma?如何使用带有业力的 webpack 多个条目？
【发布时间】：2016-04-21 10:18:57
【问题描述】：

我有多个条目的 webpack 配置：

entry: {
  'js/app': ['./css/app/style.scss', './js/app/index.js'],
  'js/vendor': ['./js/vendor/index.js', './css/vendor/index.css'],
  'js/snippets': './js/snippets/index.js'
},

我不想在 karma 配置中硬编码所有这些路径。只需包含 webpack 配置并从那里连接所有条目：

var webpackConfig = require('./webpack.config');
...
...
files: webpackConfig.entry,

但是file 选项期望有一个字符串数组。有没有现成的解决方案？不要手动将对象转换为数组。

【问题讨论】：

标签： webpack karma-runner karma-webpack

【解决方案1】：

我有类似的设置，这对我有用。在 karma 配置文件中，这些文件只是配置您的测试。对我来说是这样的：

files: [
  './scripts/vendor/jquery.min.js',
  // any other global dependency
  './scripts/**/*.spec.js'
]

编辑

由于 webpack 的工作原理，你不需要在 karma 配置中添加你的项目文件。仅仅因为您的测试将导入/需要测试主题文件，webpack 将捆绑它并运行测试。

结束了

然后在预处理器部分：

preprocessors: {
  './scripts/**/*.spec.js': ['webpack']
},

最后，我已经导入了 webpack 配置：

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

并使用karma-webpack 插件，我添加了一个 webpack 部分，如下所示：

webpack: {
  devtool: webpackConfig.devtool,
  resolve: webpackConfig.resolve,
  module: webpackConfig.module,
  externals: Object.assign({}, webpackConfig.externals, {
    chai: 'chai'
  })
},

【讨论】：

你如何包含项目文件/构建？
我想在你的测试中你正在导入/需要项目文件，所以 webpack 会处理这个问题。
我还可以请您展示您导入到测试文件中的依赖项示例吗？ |因为之前当我使用 karma 进行测试时，我在 karma config 中指定了所有项目文件
如果你有外部依赖，你可以将它们添加到你的文件配置中，例如我有一个全局依赖，在 jquery 上，所以我也添加了它。我将更新示例。但这就像以正确的顺序将依赖项添加到文件数组中一样简单
期待您的更新。你的回答已经有很大帮助了！谢谢