Estoy importando una dependencia de npm usando una llamada de importación dinámica como esta

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

Quiero que webpack vea esta importación y sepa cómo crear una parte separada para ella. Sin embargo, webpack parece mantener la dependencia en el mismo paquete principal.

Esta técnica funciona para la carga diferida de mis propios archivos js como este.

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

Sin embargo, por alguna razón, al importar una dependencia de node_modules, no realiza este comportamiento y mantiene la dependencia incluida en mi paquete principal.

La configuración de mi paquete web se ve así

 '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; };

NOTA: Puedo forzarlo a crear un fragmento separado usando la optimización.splitChunks.chunks='all';. Sin embargo, esto no realiza el comportamiento previsto porque el paquete web no genera código para recuperar dinámicamente la dependencia con una solicitud web. En su lugar, tendría que incluir manualmente ese fragmento en el código fuente HTML. Quiero que el código empaquetado en la web obtenga la dependencia por sí mismo cuando sea necesario.

Versión del nodo: 18.0.0

Versión del paquete web: 5.72.0

Webpack versión cli: 4.9.2