webpackManifest ist nicht definiert, wenn HtmlWebpackPlugin verwendet wird

Question

Ich versuche, eine index.html mit HtmlWebpackPlugin() zu erstellen, aber wenn ich versuche, die folgende Konfiguration (für Zwischenspeicherung) zu verwenden, finde ich, dass webpackManifest nicht in die Seite eingefügt wird, und ich bekomme ein "undefined " Error. Hier ist meine Config-Datei:

module.exports = function(env) { 
    return { 
     entry: { 
      main: './app/index.js', 
      vendor: ['moment','lodash','jquery'] 
     }, 
     output: { 
      filename: '[name].[chunkhash].js', 
      path: path.resolve(__dirname, 'dist'), 
      publicPath : './' 
     }, 
     plugins: [ 
      new webpack.optimize.CommonsChunkPlugin({ 
       name: ["vendor", "manifest"] 
      }), 
      new webpack.HashedModuleIdsPlugin(), 
      new WebpackChunkHash(), 
      new ChunkManifestPlugin({ 
       filename: "chunk-manifest.json", 
       manifestVariable: "webpackManifest" 
      }), 
      new HtmlWebpackPlugin({  
       chunksSortMode: 'dependency', 
       hash : true 
      }), 
      new ScriptExtHtmlWebpackPlugin() 

     ] 
    } 
}; 

Und der Fehler:

Uncaught TypeError: Cannot read property '0' of undefined 
script.src = __webpack_require__.p + window["webpackManifest"][chunkId]; 

Answer 1

habe ich versucht, die obige Konfiguration funktioniert wie erwartet, versuchen Sie diese

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
var WebpackChunkHash = require('webpack-chunk-hash'); 
 
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'); 
 
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); 
 
const path=require('path'); 
 
const webpack=require('webpack'); 
 

 
var webpackConfig = function(env){ 
 
    return { 
 
     entry: { 
 
      main: './src/index.js', 
 
      vendor: ['moment','lodash','jquery'] 
 
     }, 
 
     output: { 
 
      path:path.resolve(__dirname,'dist'), 
 
      filename: '[name].[chunkhash].js', 
 
      publicPath : './' 
 
     }, 
 
     plugins: [ 
 
      new HtmlWebpackPlugin({  
 
       chunksSortMode: 'dependency', 
 
       hash : true 
 
      }), 
 
      new webpack.optimize.CommonsChunkPlugin({ 
 
       name: ["vendor", "manifest"] 
 
      }), 
 
      new webpack.HashedModuleIdsPlugin(), 
 
      new WebpackChunkHash(), 
 
      new ChunkManifestPlugin({ 
 
       filename: 'chunk-manifest.json', 
 
       manifestVariable: 'webpackManifest', 
 
       inlineManifest: false 
 
      }), 
 
      new ScriptExtHtmlWebpackPlugin() 
 
     ] 
 
    } 
 

 
}; 
 
module.exports = webpackConfig;