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

Posted 2023-03-13

【中文标题】webpack/HtmlWebpackPlugin 错误：无效的配置对象

【英文标题】：webpack/HtmlWebpackPlugin Error: invalid configuration object

【发布时间】：2018-05-26 05:17:44

【问题描述】：

我目前正在尝试设置动态 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"
  ,

我怎样才能摆脱这个错误？

【参考方案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)