Webpack使用插件数组

Question

We have created webpack config. We want to generate multiple html pages using HtmlWebpackPlugin . So I was trying to genrate mutltiple pages using array of new HTMLWebpackPlugin() like this :

var HtmlWebpackPluginArray = [new HtmlWebpackPlugin({
    title: "TV Grid_1---",
    template: APP_DIR + '/index.template.ejs',
    filename: "grid_1.html",
    minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
    }
}), new HtmlWebpackPlugin({
    title: "TV Grid_2---",
    template: APP_DIR + '/index.template.ejs',
    filename: "grid_2.html",
    minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
    }
})];

Webpack config :

plugins: [
    new CleanWebpackPlugin(DIST_PATH),
    new ExtractTextPlugin({
        filename: 'styles.[chunkhash].css',
        // disable: false,
        allChunks: true
    }),
    // new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.[chunkhash].js'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest'
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
  HtmlWebpackPluginArray,
]

I get following error :

TypeError: arguments[i].apply is not a function

Can we use array of plugins ?

Answer 1

Can we use array of plugins ?

Yes, but your code is currently producing an array of plugins with another array of plugins inside it:

// this (your code with plugin config omitted):
plugins: [
    new CleanWebpackPlugin(…),
    new ExtractTextPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.ProvidePlugin(…),
    HtmlWebpackPluginArray
]

// results in:
plugins: [
    new CleanWebpackPlugin(…),
    new ExtractTextPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.ProvidePlugin(…),
    [
         new HtmlWebpackPlugin(…),
         new HtmlWebpackPlugin(…)
    ];
]

This won't work, because Webpack tries to call .apply() on an array. The error message you posted comes from that.

You need to merge the arrays rather than put one into another:

// this:
plugins: [
    new CleanWebpackPlugin(…),
    new ExtractTextPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.ProvidePlugin(…),
].concat(HtmlWebpackPluginArray)

// results in:
plugins: [
    new CleanWebpackPlugin(…),
    new ExtractTextPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.ProvidePlugin(…),
    new HtmlWebpackPlugin(…),
    new HtmlWebpackPlugin(…)
]
// …which is valid config and will work

The .concat() method merges two (or more) arrays into a new one without altering the original arrays. Another way would be to use an array spread like so:

plugins: [
    new CleanWebpackPlugin(…),
    new ExtractTextPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.optimize.CommonsChunkPlugin(…),
    new webpack.ProvidePlugin(…),
    ...HtmlWebpackPluginArray
] // -> same result as from .concat above

Btw. if you plan to update to Webpack 4, you can simplify the plugin config a bit – there's no CommonsChunkPlugin anymore, and chunks are configured in webpack's config object directly.