Question

我试图使用HtmlWebpackPlugin（）生成一个index.html，但是当我尝试使用以下配置（用于缓存）时，我发现webpackManifest没有插入到页面中，并且出现“未定义”错误。这是我的配置文件：

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

        ]
    }
};

错误：

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

Answer 1

我尝试了上面的配置按预期工作，试试这个

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;

使用HtmlWebpackPlugin时，webpackManifest未定义

1 个答案: