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

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

0 голосов
/ 30 марта 2019

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

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 &&
        new MiniCssExtractPlugin({
            filename: 'styles/[name].[contenthash:8].css',
            chunkFilename: 'styles/[name].[contenthash:8].chunk.css',
        }),
        isDevelopment && new webpack.HotModuleReplacementPlugin(),
    ],

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

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

plugins: [
       ...
        isDevelopment && new webpack.HotModuleReplacementPlugin(),
    ].filter(Boolean),
...
0 голосов
/ 30 марта 2019

Если 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,
...