How to config webpack - libraryTarget + splitChunks to import chunks in another project

问题

I have a similar question to How to config webpack - libraryTarget + splitChunks + requaire in borwser. I wrote an npm plugin and compile it by webpack. Next, I installed it in the Nuxt project and add an import to this npm plugin in (for example) index.vue. Plugin src files look like

import 'fetch';

export class Tools...

etc. If I don't use splitChunks all works fine (import { Tools } from 'libs/dist/.../tools'), but with splitChunks I have undefined/1/end loop loading Nuxt app/empty model, etc.

output: {
    filename: env.target_build === 'prod' && env.add_name_min === 'true'  ?
        'js/web/[name].min.js' : 'js/web/[name].js',
    chunkFilename: env.target_build === 'prod' && env.add_name_min === 'true'  ?
        'js/web/[name].min.js' : 'js/web/[name].js',
    publicPath: 'dist/',
    libraryTarget: 'umd',
    // library: 'libs',
    // umdNamedDefine: true
},
// optimization: {
//     runtimeChunk: 'single',
//     splitChunks: {
//         chunks: 'all',
//         maxInitialRequests: Infinity,
//         minSize: 0,
//         cacheGroups: {
//             vendor: {
//                 test: /[\\/]node_modules[\\/]/,
//                 name(module) {
//                     let pathSplit = module.context.match(/[\\/]node_modules[\\/]([^\/]+)\/(?!node_modules\/)([^\/]+)\/?([^\/]+)?/);

//                     if (pathSplit === null) {
//                         return 'name';
//                     } else if (pathSplit[3] === undefined) {
//                         // npm package names are URL-safe, but some servers don't like @ symbols
//                         return `npm.${pathSplit[1].replace('@', '')}`;
//                     } else {
//                         return `${pathSplit[3].replace('@', '')}.${pathSplit[1].replace('@', '')}`;
//                     }
//                 },
//             }
//         },
//     },
// },

Without runtimeChunk I thought that I just have to import (for example) Tools from 'libs/dist/.../tools' and all chunks for Tools will be loaded. The same for Tools2 etc. With runtimeChunk I thought that I have to import from runtime like import { Tools } from 'libs/dist/.../runtime' but nope... both imports not working 😕. So, it's possible to import split file from another webpack bundle?

Similar questions that I found:
Dynamic Module Import with its own chunk dependencies
Importing/loading library with chunks

来源：https://stackoverflow.com/questions/59684261/how-to-config-webpack-librarytarget-splitchunks-to-import-chunks-in-another

标签

Webpack

import

webpack-splitchunks