我有一个与How to config webpack - libraryTarget + splitChunks + requaire in borwser类似的问题。我写了一个 npm 插件并通过 webpack 编译它。接下来,我将它安装在 Nuxt 项目中,并在(例如)index.vue 中添加到这个 npm 插件的导入。插件 src 文件看起来像
import 'fetch';
export class Tools...
等如果我不使用 splitChunks 一切正常(import { Tools } from 'libs/dist/.../tools'
),但使用 splitChunks 我有 undefined/1/end 循环加载 Nuxt 应用程序/空模型等。
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('@', '')}`;
// }
// },
// }
// },
// },
// },
如果没有 runtimeChunk,我认为我只需要从“libs/dist/.../tools”导入(例如)工具,并且将加载工具的所有块。Tools2 等也是如此。对于 runtimeChunk,我认为我必须从运行时导入,import { Tools } from 'libs/dist/.../runtime'
但不......两个导入都不起作用。那么,可以从另一个 webpack 包中导入拆分文件吗?
我发现的类似问题:
Dynamic Module Import with its own chunk dependencies
Importing/loading library with chunks