如何让业力将 webpack 的模式设置为开发？答案

【问题标题】：How do I get karma to set webpack's mode to development?如何让业力将 webpack 的模式设置为开发？
【发布时间】：2018-05-17 03:25:50
【问题描述】：

当我运行 karma 时，我收到以下警告：

配置中的警告 'mode' 选项没有被设置，webpack 将回退到 'production' 这个值。将“模式”选项设置为“开发”或“生产”以启用每个环境的默认值。您还可以将其设置为“无”以禁用任何默认行为。了解更多：https://webpack.js.org/concepts/mode/

我尝试按照上面链接中的建议将mode: 'development' 添加到我的webpack-test.config.js 文件中，但这不仅没有产生任何影响，Intellij IDEA 还抱怨道：

webpack：不允许使用属性“模式”

我的单元测试确实会运行，但我想摆脱这个警告。非常感谢任何帮助。

这是我的webpack-test.config.js 文件：

const path = require('path');
const webpack = require('webpack');

const ROOT = path.resolve( __dirname, 'src' );

module.exports = {
  mode: 'production',
  context: ROOT,

  resolve: {
    extensions: ['.ts', '.js'],
    modules: [
      ROOT,
      'node_modules'
    ]
  },

  module: {
    rules: [
      // PRE-LOADERS
      {
        enforce: 'pre',
        test: /\.js$/,
        use: 'source-map-loader'
      },

      // LOADERS
      {
        test: /\.ts$/,
        exclude: [ /node_modules/ ],
        use: 'ts-loader'
      }
    ]
  },

  devtool: 'cheap-module-source-map',
  devServer: {}
};

我的karma.conf.js：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-webpack')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    files: [
      'spec.bundle.js'
    ],
    preprocessors: {
      'spec.bundle.js': ['webpack']
    },
    webpack: require('./webpack-test.config')
  });
};

还有spec.bundle.js:

const testsContext = require.context("./", true, /\.spec\.ts$/);
testsContext.keys().forEach(testsContext);

我通过以下方式启动业力：

karma start ./karma.conf.js

【问题讨论】：

标签： javascript unit-testing webpack jasmine karma-runner

【解决方案1】：

我通过反复试验偶然发现了这一点，替换为：

webpack: require('./webpack-test.config')

...在karma.conf.js 中：

webpack: {
  mode: 'development'
}

...警告消失了。不仅如此，我发现我真的不需要我的 webpack-test.config，也不需要我加载的两个 npm 模块来支持它，source-map-loader 和 ts-loader。

如果有人真的想同时指定 mode: 'development' 并指定特定的 webpack 配置文件，我不确定他们会怎么做。我尝试了一些选项，但找不到任何可行的方法。这东西没有很好的文档:(

【讨论】：

【解决方案2】：

你不应该在你的配置文件中要求 webpack 包。不确定这是否会导致 Intellij 感到困惑，但mode 肯定是 webpack 的有效属性。

https://webpack.js.org/concepts/mode/

我还注意到，在您的 karma.conf.js 文件中，webpack: require('./webpack-test.config') 行缺少配置文件的 .js 扩展名。这可能就是您的配置设置没有反映在您的业力测试中的原因。

【讨论】：