CODEWITHSUNDEEP
webpackwebpack-2
goonieiam
goonieiam

Reputation: 77

webpackManifest is undefined when using HtmlWebpackPlugin

Im trying to generate an index.html using HtmlWebpackPlugin() but when I try using the following configuration(for caching) I find that webpackManifest is not inserted into the page, and I get an "undefined" error. Here is my config file:

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()

        ]
    }
};

And the error:

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

Upvotes: 2

Views: 1691

Answers (1)

Kasiriveni
Kasiriveni

Reputation: 5921

I tried the above configuration is working as expected , try this 

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;

Upvotes: 1

Related Questions