webpack 2.1.0-beta.25 错误未知属性 postLoaders

Question

如果我指定 postLoaders: []，webpack 2.1.0-beta.25(至少 beta 23+)会抛出以下错误在我的 webpack.config 中:

(只是有趣的一点):

configuration.module has an unknown property 'postLoaders'.

(完整堆栈):

23 09 2016 13:37:31.599:ERROR [preprocess]: Can not load "webpack"!
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'postLoaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
Options affecting the normal modules (`NormalModuleFactory`).
    at webpack (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/webpack/lib/webpack.js:16:9)
    at new Plugin (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/karma-webpack/lib/karma-webpack.js:63:18)
    at invoke (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:59:20)
    at get (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:48:43)
    at /Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:71:14
    at Array.map (native)
    at Array.invoke (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/karma/lib/preprocessor.js:55:20)
    at Array.forEach (native)
    at createPreprocessor (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/karma/lib/preprocessor.js:74:20)
    at Array.invoke (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:75:15)
    at get (/Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:48:43)
    at /Users/jared.youtsey/src/Quartz/Common/source/node_modules/di/lib/injector.js:71:14
    at Array.map (native)

我的 webpack.config:

process.env.npm_lifecycle_event = 'test';
var webpack = require('webpack');
var path = require('path');
var NODE_MODULES = root("node_modules");

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

module.exports = {
    entry: {},

    resolve: {
        modules: [root(""), NODE_MODULES],
        extensions: [".ts", ".js", ".json", ".css", ".scss", ".html"]
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: "ts",
                query: {
                    "ignoreDiagnostics": [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 -> Duplicate identifier
                        2374, // 2374 -> Duplicate number index signature
                        2375, // 2375 -> Duplicate string index signature
                        2502  // 2502 -> Referenced directly or indirectly
                    ]
                },
                exclude: [/node_modules\/?!(@angular)/]
            },

            { test: /\.scss$/, loader: "null" },
            { test: /\.css$/, loader: "null" },
            { test: /\.html$/, loader: "raw" }
        ],
        postLoaders: [
            {
                test: /\.(js|ts)$/,
                include: [root("")],
                loader: "istanbul-instrumenter-loader",
                exclude: [/.+-spec\.ts$/, /\.e2e\.ts$/, NODE_MODULES]
            }
        ]
    }
};

似乎 webpack 站点上的加载器文档仍然引用了 pre/postLoaders。但是任何一个，即使是空的，仍然会产生这个错误。

模式改变了吗？ postLoader 应该去哪里，或者，应该如何配置 postLoader？

Answer 1

有一个新的enforce :pre或 post在 v2.1.0-beta.24 和 v2.1.0-beta.25 的发行说明中引入的属性:https://github.com/webpack/webpack/releases

我们不得不从以下位置移动 preLoaders:

module: {
  preLoaders: [
    {
      test: /\.jsx?$/,
      loader: 'eslint',
      exclude: /(node_modules)/
    }
  ],
  loaders: [
    ...
  ]
}

对此:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'eslint',
      exclude: /(node_modules)/,
      enforce: 'pre'
    },
    ...
  ]
}

所以我猜你的配置最终会看起来像:

process.env.npm_lifecycle_event = 'test';
var webpack = require('webpack');
var path = require('path');
var NODE_MODULES = root("node_modules");

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

module.exports = {
    entry: {},

    resolve: {
        modules: [root(""), NODE_MODULES],
        extensions: [".ts", ".js", ".json", ".css", ".scss", ".html"]
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: "ts",
                query: {
                    "ignoreDiagnostics": [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 -> Duplicate identifier
                        2374, // 2374 -> Duplicate number index signature
                        2375, // 2375 -> Duplicate string index signature
                        2502  // 2502 -> Referenced directly or indirectly
                    ]
                },
                exclude: [/node_modules\/?!(@angular)/]
            },

            { test: /\.scss$/, loader: "null" },
            { test: /\.css$/, loader: "null" },
            { test: /\.html$/, loader: "raw" },

            {
                test: /\.(js|ts)$/,
                include: [root("")],
                loader: "istanbul-instrumenter-loader",
                exclude: [/.+-spec\.ts$/, /\.e2e\.ts$/, NODE_MODULES],
                enforce: 'post'
            }
        ]
    }
};