Question

似乎无法在webpack中找到任何调试选项或插件来显示究竟是什么进入了一个块。

为什么我需要这个？我注意到代码分割的字面意思使得一切都变得更大，然后将所有东西都放在一个文件中。这有点反直觉，因为我不相信webpack的bootstrap代码是那么重要;我怀疑它可能是缩小/重复数据删除，但是如果不知道哪些模块实际上是块状的，那么很难做一些孤立的测试来确认。

我的构建过程使用gulp;如果这有任何区别。

Answer 1

似乎密钥知道为--display-modules以显示所有模块：

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator)
{
  let newRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
  let newSize = CGSize(width: size.width, height: size.height)

  self.view.frame = newRect

  let skView = self.view as! SKView      
  if let sceneNode = skView.scene as! GameScene? {      
    sceneNode.size = newSize

    sceneNode.position = CGPoint(x: self.view.frame.midX, y: self.view.frame.midY)

  }
}

然后，您将获得类似以下内容的已使用模块列表：

$ webpack --display-modules

Answer 2

这也是与webpack4兼容的插件，该插件将所有块输出到单个JSON文件。

https://www.npmjs.com/package/chunks-2-json-webpack-plugin

这里是使用方式：

1）在webpack配置文件中，导入插件（当然，在安装后：）-npm i --save-dev chunks-2-json-webpack-plugin）并在plugins key下实例化它。

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文件中。

您可以在链接本身上找到更多信息。

Answer 3

解决方案是编写一个解析.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 output设置中的devtool设置，即：

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

webpack/internal和node_modules来自以下规范化脚本（我不喜欢webpack＆＃39;〜＆＃34;替换功能）。

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);
    });
};

Answer 4

这是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仍然存在。

如何获取Webpack

4 个答案: