webpack/HtmlWebpackPluginエラー：無効な設定オブジェクト

Question

現在、動的markdown/pug.jsワークフローを設定しようとしています。しかし、おそらくHtmlWebpackPluginによって生成された "Invalid configuration object"エラーが発生します。

これは私の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) 
    ] 
}; 

私はplugins -arrayにmap -callを追加すると、私は次のエラーメッセージが出ます：しかし

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? } 

を、Iこれらのオプションがどこに設定されているかはわかりません。 I 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' } } ] 

をそして私は、このconfigオブジェクトでエラーが発生したオプションを見つけることができません。

私はすでに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

としては、あなたが配列HtmlWebpackPluginのインスタンスを作成し、plugins配列の最初の要素としてこれを追加しようとしている、あなたのmap出力から見ることができます。それはちょっと次のようになります。

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

これらはあなたが必要なプラグインだけであれば、あなただけではなくpluginsに直接mapの出力を割り当てることができます：

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

そうでない場合（あなたがあなた自身の中で提案されているようコメント）、あなたがそれらを追加するスプレッド演算子を使用することができます。

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

サイドノートとして、を使用するための具体的な理由はありません場合、あなただけmarkdownFilesDataとして直接mapを使用することができるはずArrayです：

...markdownFilesData.map(mdToHtmlPlugin)