• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

125
Views
How do I make webpack automatically chunk dynamic imports from node_modules?

I am importing a npm dependency using a dynamic import call like this

const { default: Sortable } = await import(
         /* webpackMode: "lazy" */ 'sortablejs'
    );

I want webpack to see this import and know to create a separate chunk for it. However webpack seems to keep the dependency in the same main bundle.

This technique works for lazy loading my own js files such as this.

const importedComponent = await import(/* webpackMode: "lazy" */ `./components/${templateId}.js`);

However for some reason when importing a dependency from node_modules it's not performing this behavior and keeping the dependency bundled within my main bundle.

My webpack config looks like this

'use strict';
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function (env, argv) {
    const webpackConfig = {
        mode: argv.mode,
        devtool: argv.mode == 'production' ? undefined : 'eval',
        target: 'web',
        plugins: [
            new MiniCssExtractPlugin(),
        ],
        entry: {
            designer: ['./src/webapps/designer/designer.js', './src/webapps/designer/designer.css'],
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve('build', 'public'),
            publicPath: '/',
            clean: true,
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                            },
                        },
                    ],
                },
                {
                    test: /\.html$/i,
                    loader: 'html-loader',
                },
            ],
        },
    };

    return webpackConfig;
};

NOTE: I am able to force it to create a separate chunk using optimization.splitChunks.chunks='all';. However this doesn't perform the intended behavior because webpack isn't generating code to dynamically fetch the dependency with a web request. Instead I would have to manually include that chunk in the HTML source code. I want the webpacked code to fetch the dependency on it's own when it is needed.

Node version: 18.0.0

Webpack version: 5.72.0

Webpack cli version: 4.9.2

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error