Javascript webpack/HtmlWebpackPlugin错误：配置对象无效

我目前正在尝试设置一个动态降价/pug.js工作流。但我得到了一个“无效配置对象”错误，很可能是由HtmlWebpackPlugin生成的

这是我的webpack.config.json：

const path = require('path');
const fs = require('fs');
const marked = require('marked');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const markdownFilesData = fs
    .readdirSync('./entries')
    .filter((filename) => {
        return /\.md$/.test(filename);
    })
    .map((filename) => {
        return {
            markdown: fs.readFileSync(path.join(MARKDOWN_FILE_DIR, filename), 'utf8'),
            filename
        };
    });

const mdToHtmlPlugin = ({filename, markdown}) => {
    return new HtmlWebpackPlugin({
        template: 'pug-html-loader!templates/index.pug',
        cache: true,
        filename: `pages/${filename}.html`,
        bodyHTML: marked(markdown)
    });
};

module.exports = {
    entry: {
        app: './src/scripts/main.js',
        compile: './scripts/styles.js',
    },
    output: {
        libraryTarget: 'umd',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin)
    ]
};

当我将

映射

-调用添加到我的

插件

-数组时，我收到以下错误消息：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'strictThisContextOnImports'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?
, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.output has an unknown property 'chunkLoadTimeout'. These properties are valid:
   object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpda
teFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
   Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
 - configuration.resolve has an unknown property 'cacheWithContext'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCall
s? }
 - configuration.resolveLoader has an unknown property 'cacheWithContext'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCall
s? }

但是，我找不到这些选项设置在哪里。当我

console.log

Array.prototype.map.call（markdownFilesData，mdToHtmlPlugin）

时，我得到以下输出：

[ HtmlWebpackPlugin {
    options: 
     { template: 'pug-html-loader!templates/index.pug',
       filename: 'pages/hello-world.md.html',
       hash: false,
       inject: true,
       compile: true,
       favicon: false,
       minify: false,
       cache: true,
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
       title: 'Webpack App',
       xhtml: false,
       bodyHTML: '<h1 id="hello-world">Hello World</h1>\n<p>Yo Sup</p>\n' } } ]

---

如何消除此错误？

从您的

映射

输出中可以看出，您正在创建一个

HtmlWebpackPlugin

实例数组，然后尝试将其添加为

插件

数组的第一个元素。有点像这样：

plugins: [
    [
        new HtmlWebpackPlugin(...),
        new HtmlWebpackPlugin(...),
        // ...
    ]
]

如果这些是您需要的唯一插件，您可以直接将

map

的输出分配给

插件

：

plugins: Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin)

否则（如您在自己的评论中所建议的），您可以使用排列运算符附加它们：

plugins: [
    // Other plugins.
    ...Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin)
]

作为旁注，如果没有使用

Array.prototype

的具体原因，您应该能够直接使用

map

，因为

markdownFilesData

是一个

Array

：

...markdownFilesData.map(mdToHtmlPlugin)

...markdownFilesData.map(mdToHtmlPlugin)