清单块Webpack中的清单含义

Question

I'm learning webpack and how to use the chunkhash features. In this example on github, it uses a 'manifest' name in the plugin.

What is it for? I didn't find any explanation for its use case.

Thank you.

var path = require("path");
var webpack = require("../../");
module.exports = {
    entry: {
        main: "./example",
        common: ["./vendor"] // optional
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].[chunkhash].js",
        chunkFilename: "[chunkhash].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["common", "manifest"]
        })
        /* without the "common" chunk:
        new webpack.optimize.CommonsChunkPlugin({
            name: "manifest"
        })
        */
    ]
};

Answer 1

Little late to the party, but I've just stumbled upon your question. This configuration will extract webpack's runtime and manifest data into a separate chunk.

The behaviour is described here https://webpack.js.org/plugins/commons-chunk-plugin/#manifest-file :

To extract the webpack bootstrap logic into a separate file, use the CommonsChunkPlugin on a name which is not defined as entry . Commonly the name manifest is used.

You can read more about the manifest at https://webpack.js.org/concepts/manifest/ while the reasons for extracting it to a separate file are nicely explained here: https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 and here: https://webpack.js.org/guides/caching/ (it's required for a predictable naming of vendor chunks to improve their caching).