javascript - 使用插件数组的 Webpack

Question

我们已经创建了 webpack 配置。我们想要使用 HtmlWebpackPlugin 生成多个 html 页面。所以我尝试使用新的 HTMLWebpackPlugin() 数组生成多个页面，如下所示:

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 配置:

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

我收到以下错误:

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

我们可以使用一系列插件吗？

Answer 1

Can we use array of plugins ?

是的，但是您的代码当前正在生成一个插件数组，其中包含另一个插件数组:

// 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(…)
    ];
]

这不起作用，因为 Webpack 尝试在数组上调用 .apply() 。您发布的错误消息就是由此而来。

您需要合并数组而不是将一个数组放入另一个数组中:

// 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

.concat()方法将两个(或更多)数组合并为一个新数组，而不更改原始数组。另一种方法是使用数组展开，如下所示:

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

顺便说一句。如果您计划更新到 Webpack 4，您可以稍微简化一下插件配置 - 不再有 CommonsChunkPlugin， block 直接在 webpack 的配置对象中配置。