Gulp 如何获取Webpack中每个块包含的所有文件(或模块)的列表

ha5z0ras  于 2022-12-08  发布在  Gulp
关注(0)|答案(5)|浏览(198)

似乎找不到任何调试选项或插件在webpack显示什么到底进入了一个块。
为什么我需要这个呢?我注意到代码分割会使所有的东西都变得更大,而不是把所有的东西都放在一个文件中。这有点违反直觉,因为我不相信来自webpack的引导代码有那么重要;我怀疑这可能是缩小/重复数据删除,但不知道哪些模块实际上是分块在一起,这是很难做一些孤立的测试来确认。

  • 我的构建过程使用gulp;如果这有什么不同的话。
ulydmbyx

ulydmbyx1#

网络包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]
aiazj4mn

aiazj4mn2#

您可以编写一个插件来完成此操作。
例如,

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[]chunk调用,在里面你就可以访问你想要的一切。
此外,stats对象包含了所有你需要的post-build信息,可以在done插件中找到。

e0bqpujr

e0bqpujr3#

这是Boothi 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之前,它不是一个可Map的对象。我发现module.id更接近我所需要的,但是如果你需要的话,module.request仍然存在。

svgewumm

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键下示例化它。

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文件中。
您可以在链接上找到更多信息。

bvpmtnay

bvpmtnay5#

解决方案是编写一个脚本来解析. js.map文件,因为这些文件包含一个sources条目,该条目可用于识别块中包含的所有文件。
下面是一个可以完成这项工作的小吞咽脚本,

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 output设置中的devtool设置,即:

devtoolModuleFilenameTemplate: "webpack://source-code/[resource-path]",
devtoolFallbackModuleFilenameTemplate: "webpack://source-code/[resource-path]?[hash]",

webpack/internalnode_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);
    });
};

相关问题