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中的建议重新安装了我的项目，并检查了我的网络包版本。

这些是我的依赖关系：

"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个实例的数组，然后尝试将其添加为{{1}的第一个元素数组。它看起来像这样：

plugins

如果这些是您需要的唯一插件，则可以直接将plugins: [ [ new HtmlWebpackPlugin(...), new HtmlWebpackPlugin(...), // ... ] ]的输出直接分配给map：

plugins

否则（正如您在自己的评论中所建议的那样），您可以使用spread运算符追加它们：

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

作为旁注，如果没有使用plugins: [ // Other plugins. ...Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin) ]的具体原因，您应该能够Array.prototype直接使用map < / em> markdownFilesData：

Array

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

1 个答案: