var debugWebpackMapFile = function (file) {
var cleanupRules = {
// executed in order
'/src/client/javascript/node_modules/': '',
'/src/client/javascript/': 'static/'
};
return new Promise(function (resolve, reject) {
var match = /\/([^\/]+).js.map$/.exec(file);
if (match != null) {
var filename = match[1];
console.log("\n " + filename + "\n =======================\n");
var mapjson = JSON.parse(fs.readFileSync(file));
var dependencies = [];
var sourcefiles = [];
_.each(mapjson.sources, function (srcfile) {
srcfile = srcfile.replace('webpack://source-code', '', srcfile);
var match = /^\/node_modules\/([^\/]+)/.exec(srcfile);
if (match == null) {
match = /^(\/src\/.*\.js)(\?.*)?/.exec(srcfile);
if (match != null) {
// project source file
srcfile = match[1];
_.each(cleanupRules, function (to, from) {
srcfile = srcfile.replace(from, to);
});
// the sources are in random order in the map file,
// so we'll need to sort before displaying anything
sourcefiles.push(srcfile);
}
}
else {
// dependency
var pkg = match[1];
if (dependencies.indexOf(pkg) == -1) {
dependencies.push(pkg);
}
}
});
sourcefiles.sort();
_.each(sourcefiles, function (srcfile) {
console.log(" " + srcfile);
});
if (dependencies.length > 0) {
console.log("\n ---- 3rd Party ------------------\n");
dependencies.sort();
_.each(dependencies, function (pkg) {
console.log(" " + pkg);
});
}
}
console.log("\n\n");
resolve();
});
}
gulp.task('js:debug', function (cb) {
var conf = webpackConf.mainjs;
glob(conf.output.path + '/*.map', {}, function (er, files) {
var promises = [];
_.each(files, function (file) {
promises.push(debugWebpackMapFile(file));
});
Promise.all(promises).lastly(cb);
});
});
5条答案
按热度按时间ulydmbyx1#
网络包5.x:
Webpack 5.x之前的版本:
它似乎有一个名为
--display-modules
的参数来显示所有模块,如下所示:然后,您将获得类似于以下内容的已使用模块列表:
aiazj4mn2#
您可以编写一个插件来完成此操作。
例如,
要了解更多的细节,请查看http://webpack.github.io/docs/plugins.html页面。它包含了所有你可以挂钩的地方的文档。找到合适的挂钩,用
chunks: Chunk[]
或chunk
调用,在里面你就可以访问你想要的一切。此外,stats对象包含了所有你需要的
post-build
信息,可以在done
插件中找到。e0bqpujr3#
这是Boothi Rajaa的答案的更新版本,将适用于
Webpack
的后续版本(我使用的是4.37.0)此更新版本对我很有效:
用法:
最大的区别是,他们现在将模块信息存储在
_modules
中,而不是modules
中,而且在Array.from
之前,它不是一个可Map的对象。我发现module.id
更接近我所需要的,但是如果你需要的话,module.request
仍然存在。svgewumm4#
这里还有一个与webpack 4兼容的插件,它可以将所有的块输出到一个JSON文件中。
https://www.npmjs.com/package/chunks-2-json-webpack-plugin
以下是使用方法:
1)在你的webpack配置文件中,导入插件(当然是在你安装它之后:)-
npm i --save-dev chunks-2-json-webpack-plugin
)并在plugins键下示例化它。差不多就是这样,您将得到一个JSON文件,看起来如下所示:
在这里,我们将所有的块放在一个JSON文件中。
您可以在链接上找到更多信息。
bvpmtnay5#
解决方案是编写一个脚本来解析. js.map文件,因为这些文件包含一个
sources
条目,该条目可用于识别块中包含的所有文件。下面是一个可以完成这项工作的小吞咽脚本,
您需要修改脚本以满足您自己的配置。
为了防止不明显,
webpack://source-code
部分是由于webpackoutput
设置中的devtool设置,即:webpack/internal
和node_modules
来自下面的规范化脚本(我不喜欢webpack的“~”替换特性)。