Webpack с использованием массива плагинов

Мы создали конфигурацию webpack. Мы хотим сгенерировать несколько html-страниц с помощью HtmlWebpackPlugin. Итак, я пытался сгенерировать несколько страниц, используя массив нового 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

Можем ли мы использовать массив плагинов?

javascript webpack

19.03.2018 15:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

589

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 больше нет, а блоки настраиваются напрямую в объекте конфигурации webpack.

Спасибо за подробное объяснение, теперь я понял :).

— 20.03.2018 07:34

19.03.2018 15:56