javascript - webpack/HtmlWebpackPlugin错误: invalid configuration object

Question

我目前正在尝试设置动态 markdown/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)
    ]
};

当我将 map 调用添加到我的 plugins 数组时，我收到以下错误消息:

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' } } ]

我找不到在此配置对象中产生错误的选项。

我已经按照 this question 中的建议重新安装了我的项目并检查了我的 webpack 版本。

这些是我的依赖项:

"devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "css-loader": "~0.28.7",
    "eslint": "~4.10.0",
    "eslint-config-airbnb": "~16.1.0",
    "extract-loader": "~1.0.1",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "~1.1.5",
    "glob": "~7.1.2",
    "html-loader": "~0.5.1",
    "html-webpack-plugin": "2.30.1",
    "marked": "0.3.7",
    "node-sass": "~4.6.0",
    "pug": "~2.0.0-rc.4",
    "pug-html-loader": "~1.1.5",
    "pug-loader": "~2.3.0",
    "sass-loader": "~6.0.6",
    "style-loader": "~0.19.0",
    "webpack": "3.10.0"
  },

如何消除这个错误？

Answer 1

从 map 输出中可以看出，您正在创建 HtmlWebpackPlugin 实例的数组，然后尝试将其添加为第一个plugins 数组的元素。它看起来有点像这样:

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

如果您只需要这些插件，您可以将 map 的输出直接分配给 plugins:

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

否则(正如您在自己的评论中建议的那样)，您可以使用扩展运算符来附加它们:

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

顺便说一句，如果没有使用Array.prototype的具体原因，您应该能够直接使用map作为markdownFilesData 是一个数组:

...markdownFilesData.map(mdToHtmlPlugin)