我正在尝试使用一个插件,该插件列出每个条目的所有文件相关性,以用于包拆分/代码拆分以及动态导入。我遇到的问题是动态导入拆分成自己的块,需要知道它从何处拆分以及进入哪个条目。例如,如果名为“ admin”的条目具有动态导入语句,我希望能够列出该动态导入文件以及输出的捆绑文件以及任何其他拆分的块文件。
在插件末尾产生所需的结果
{
app: ['app.bundle.js'],admin: ['[file that was split off from app due to dynamic imports]','admin.bundle.js']
}
这是我的输入和输出示例
entry: {
app: './src/app/index.js',admin: './src/admin/index.js'
},output: {
filename: '[name]/[name].bundle.js',publicPath: 'dist/'
}
这是输出dist的外观。 Polyfill目录,其中包含来自管理员条目的动态导入文件。
/dist
/admin
admin.bundle.js
/app
app.bundle.js
/polyfill
polyfill.bundle.js
./ src / admin / index.js中的源代码
import _ from 'lodash';
console.log(
_.join(['Another','module','loaded!'],' ')
);
if('fetch' in window){
} else {
import(/* webpackChunkName: "polyfill" */ '../../lib/polyfill').then(() => console.log('polyfilled'));
}
示例插件类:
class MyPlugin {
constructor(){}
apply(compiler){
compiler.hooks.afterEmit.tap('',(compilation) => {
const { chunks,entrypoints,chunkGroups } = compilation;
const myEntries = {}
for (const [ entry,entrypoint] of entrypoints) {
const { chunks,origins,runtimeChunk } = entrypoint;
}
});
}
}
在任何地方都找不到表明polyfill块已从管理条目中断的地方。任何在编译对象方面知识渊博,能为我指出正确方向的人将不胜感激。