Dynamic imports in Webpack

  Kiến thức lập trình

I have a webpack file (that borrows from this: https://github.com/webpack/webpack/issues/5493):

import type { Configuration } from 'webpack'

const config: Configuration = {
    // other properties
    plugins: [
        // other plugins
        webpackBarPlugin()
        // other plugins
    ].filter(Boolean)
    // other properties
}

export default config

And a helper function to generate the plugin – the key is that I want the plugin to be dynamically imported.

export const webpackBarPlugin = () => {
    if (process.env.NODE_ENV === 'development') {
        import('webpackbar').then(module => {
            const WebpackBar = module.default
            return new WebpackBar()
        })
    }

    return false
}

When hovering over the function name, it reads: () => boolean instead of what I would want: () => boolean | WebpackBarPlugin. Hence, when attempting this build, this does not work. I have tried all kinds of things to refactor this but can’t seem to get plugin to return properly.

LEAVE A COMMENT