Плагин Webpack - HMR выдает ошибку при запуске npm build / dev

#webpack #webpack-dev-server #webpack-4

Вопрос:

Для создания нового проекта я использую webpack 4.29.6 и webpack-dev-server 3.2.1 Now в моем конфигурационном файле. Я хочу добавить HotModuleReplacementPlugin() , но он выдает мне ошибку при выполнении либо сборки при запуске npm, либо разработки при запуске npm.

 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[3] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[3] should be an object.
      -> Plugin instance
    * configuration.plugins[3] should be an instance of function
      -> Function acting as plugin

Кто-нибудь может мне помочь в этом? Обратите внимание, что плагин применяется только в производственном режиме.

  plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            Object.assign({}, {
                    inject: true,
                    template: publicDir   '/index.html',
                },
                isProduction ? {
                    minify: {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeRedundantAttributes: true,
                        useShortDoctype: true,
                        removeEmptyAttributes: true,
                        removeStyleLinkTypeAttributes: true,
                        keepClosingSlash: true,
                        minifyJS: true,
                        minifyCSS: true,
                        minifyURLs: true,
                    },
                } : undefined)),
        isProduction amp;amp;
        new MiniCssExtractPlugin({
            filename: 'styles/[name].[contenthash:8].css',
            chunkFilename: 'styles/[name].[contenthash:8].chunk.css',
        }),
        isDevelopment amp;amp; new webpack.HotModuleReplacementPlugin(),
    ],

Ответ №1:

Если isProduction или isDevelopment значение неверно, вы передаете их значение в качестве плагина.

Вы можете попробовать что-то вроде этого:

 const PLUGINS = [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(
        Object.assign({}, {
                inject: true,
                template: publicDir   '/index.html',
            },
            isProduction ? {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeRedundantAttributes: true,
                    useShortDoctype: true,
                    removeEmptyAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    keepClosingSlash: true,
                    minifyJS: true,
                    minifyCSS: true,
                    minifyURLs: true,
                },
            } : undefined
        )
    ),
];

if (isProduction) PLUGINS.push(
    new MiniCssExtractPlugin({
        filename: 'styles/[name].[contenthash:8].css',
        chunkFilename: 'styles/[name].[contenthash:8].chunk.css',
    })
);

if (isDevelopment) PLUGINS.push(
    new webpack.HotModuleReplacementPlugin()
);

....

plugins: PLUGINS,

Ответ №2:

Благодаря совету @UjinT34, если условия в моих плагинах ложны, я внезапно добавляю в массив не плагин, а логическое значение. Вот почему в конце массива плагинов мне просто нужно было отфильтровать логические значения, вот так:

 plugins: [
       ...
        isDevelopment amp;amp; new webpack.HotModuleReplacementPlugin(),
    ].filter(Boolean),
...