webpackManifest is undefined when using HtmlWebpackPlugin

Question

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];

am not able to reproduce the issue ,look like your configuration is fine — Kasiriveni
– Kasiriveni, Commented Jun 11, 2017 at 14:46

Kasiriveni · Accepted Answer · 2017-06-12 14:17:21Z

1

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;

edited Jun 12, 2017 at 14:17

answered Jun 11, 2017 at 14:50

Kasiriveni

6,0011 gold badge24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kasiriveni Over a year ago

@goonieiam any help please ask

Collectives™ on Stack Overflow

webpackManifest is undefined when using HtmlWebpackPlugin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related