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

而且我找不到在此配置對象中產生錯誤的選項。

我已經按照此問題的建議重新安裝了我的項目，並檢查了我的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 ：

...markdownFilesData.map(mdToHtmlPlugin)