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

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-call 添加到我的plugins-array 时，我收到以下错误消息：

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.logArray.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 是 Array： p>

...markdownFilesData.map(mdToHtmlPlugin)