Question

要建立一个新项目，我现在在配置文件中使用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(),
    ],

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

Answer 2

由于@ UjinT34的建议，如果我的插件上的条件为false，我突然不在数组中添加一个插件，而是一个布尔值。这就是为什么在插件数组的末尾我只需要过滤掉布尔值，就像这样：

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

Webpack-HMR插件在npm run build / dev

2 个答案: