似乎在 webpack 中找不到任何调试选项或插件来显示块中的确切内容。
为什么我需要这个？我注意到代码拆分实际上使所有内容都变得更大然后只是将所有内容粘贴在单个文件中的情况。这有点违反直觉，因为我不相信 webpack 的引导代码有那么重要；我怀疑这可能是缩小/重复数据删除，但是在不知道哪些模块实际上被分块在一起的情况下，很难进行一些孤立的测试来确认。
我的构建过程使用 gulp；如果这有什么不同的话。
问问题
22821 次
5 回答
15
Webpack 5.x：
$ webpack --stats-modules-space 999
在 Webpack 5.x 之前：
似乎它调用了参数--display-modules来显示所有模块，如下所示：
$ webpack --display-modules
然后您将获得类似于以下的已用模块列表：
Asset Size Chunks Chunk Names
javascripts/webpack/app.js 211 kB 0 [emitted] javascripts/webpack/app
stylesheets/webpack/app.js 4.13 kB 1 [emitted] stylesheets/webpack/app
stylesheets/webpack/app.scss 2.99 kB 1 [emitted] stylesheets/webpack/app
[0] ./app/webpack/js/behaviors/lory-icon-slider.js.coffee 1.1 kB {0} [optional] [built]
[1] ./app/webpack/css/components (\.scss|\.css)$ 160 bytes {1} [built]
[2] ./app/webpack/js/behaviors (\.js|\.js.jsx|\.js.coffee)$ 252 bytes {0} [built]
[3] ./~/pickmeup/css/pickmeup.scss 41 bytes {1} [built]
[4] ./app/webpack/css/app.js 205 bytes {1} [built]
[5] ./app/webpack/js/app.js 250 bytes {0} [built]
[6] ./app/webpack/js/behaviors/pickmeup-fixed-calendar.js 3.47 kB {0} [optional] [built]
[7] ./~/lory.js/dist/jquery.lory.js 25 kB {0} [built]
[8] ./~/pickmeup/js/pickmeup.js 41.4 kB {0} [built]
[9] (webpack)/buildin/global.js 509 bytes {0} [built]
Child extract-text-webpack-plugin:
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader!./~/sass-loader/lib/loader.js!./~/pickmeup/css/pickmeup.scss 3.23 kB {0} [built]
于 2017-09-18T11:02:25.103 回答
13
您可以编写一个插件来执行此操作。
例如，
var PrintChunksPlugin = function() {};
PrintChunksPlugin.prototype.apply = function(compiler) {
compiler.plugin('compilation', function(compilation, params) {
compilation.plugin('after-optimize-chunk-assets', function(chunks) {
console.log(chunks.map(function(c) {
return {
id: c.id,
name: c.name,
includes: c.modules.map(function(m) {
return m.request;
})
};
}));
});
});
};
有关更多详细信息，请查看此页面http://webpack.github.io/docs/plugins.html。它包含您可以挂钩的所有地方的文档。chunks: Chunk[]找到用or调用的正确钩子，在chunk里面你将能够访问你想要的一切。
此外，stats 对象包含post-build您需要的所有信息。它在done插件中可用。
于 2015-05-05T08:30:25.857 回答
5
这是 Boopathi Rajaa 答案的更新版本，适用于更高版本Webpack（我使用的是 4.37.0）
这个更新的版本对我有用：
class PrintChunksPlugin {
apply (compiler) {
compiler.plugin('compilation', compilation => {
compilation.plugin('after-optimize-chunk-assets', chunks => {
console.log(chunks.map(chunk => ({
id: chunk.id,
name: chunk.name,
modules: Array.from(chunk._modules).map(module => module.id)
})))
})
})
}
}
用法：
plugins: [
new PrintChunksPlugin(),
]
最大的区别是它们现在将模块信息存储在_modules而不是modules，并且在Array.from. 我发现module.id它更接近我需要的东西，但module.request如果你需要它，它仍然在那里。
于 2019-07-30T20:13:21.957 回答
3
这里还有一个与 webpack4 兼容的插件，它将所有块输出到单个 JSON 文件。
https://www.npmjs.com/package/chunks-2-json-webpack-plugin
以下是如何使用它：
1) 在你的 webpack 配置文件中，导入插件（当然是在你安装它之后:) - npm i --save-dev chunks-2-json-webpack-plugin）并在 plugins 键下实例化它。
const Chunks2JsonPlugin = require('chunks-2-json-webpack-plugin');
const path = require('path');
const publicPath = '/app/';
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist'),
publicPath
},
plugins: [
new Chunks2JsonPlugin({ outputDir: 'dist/', publicPath })
]
};
差不多就是这样，你会得到一个 JSON 文件，看起来像这样：
{
"chunk-vendors": {
"js": ["/app/js/chunk-vendors.fc40696c.js"],
"js.map": ["/app/js/chunk-vendors.fc40696c.js.map"]
},
"app": {
"css": ["/app/css/app.eb829ccc.css"],
"js": ["/app/js/app.dd31cdcb.js"],
"js.map": ["/app/js/app.dd31cdcb.js.map"]
}
}
在这里，我们将所有块都放在一个 JSON 文件中。
您可以在链接本身上找到更多信息。
于 2018-07-11T13:19:23.847 回答
0
解决方案是编写一个解析 .js.map 文件的脚本，因为它们包含一个sources条目，可用于识别块中包含的所有文件。
这是一个可以完成工作的小 gulp 脚本，
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);
});
});
您需要修改脚本以满足您自己的配置。
以防万一它不明显，webpack://source-code部分是由于 webpack 设置中的 devtooloutput设置，即：
devtoolModuleFilenameTemplate: "webpack://source-code/[resource-path]",
devtoolFallbackModuleFilenameTemplate: "webpack://source-code/[resource-path]?[hash]",
webpack/internaland来自以下node_modules规范化脚本（我不喜欢 webpack 的“~”替换功能）。
var normalizeMaps = function (conf, cb) {
glob(conf.output.path + '/*.map', {}, function (er, files) {
var promises = [];
_.each(files, function (file) {
promises.push(replaceInFile(file, [
[ /\/~/g, '/node_modules' ],
[ /\.\//g, ''],
[ /source-code\/\(webpack\)/g, 'source-code/webpack/internal' ]
]));
});
Promise.all(promises).lastly(cb);
});
};
于 2015-04-30T13:13:16.463 回答