webpack 中的多编译器和多入口点有什么区别？

Question

伙计们！！我正在尝试学习 webpack 并优化我的 webpack 项目（一个多页面项目）配置，但我对一些问题感到困惑。希望有人可以帮助我。

顺便说一句，请原谅我的英语不好，但我认为谷歌翻译应该基本上可以让我解释我的问题。如果描述中有不清楚的地方，请指出，我会修改。

相关链接

https://github.com/webpack/webpack/blob/main/examples/multiple-entry-points/webpack.config.js

https://github.com/webpack/webpack/blob/main/examples/multi-compiler/webpack.config.js

Q1. mutil-html 页面配置中的advantages和 分别是什么？disadvantages

也许multi-compiler还有更多flexible configuration但是speed slower？

Q2.如果我使用 的配置mutil-entry-point，如何获取插件或加载器中当前的条目名称？

我知道webpack的作者说这不能在loader上完成， https://github.com/webpack/webpack/issues/6124#issuecomment-351647892

但在插件中怎么样？

Q3.有什么办法可以得到完整的dependency graph from the entry吗？

像 webpack-bundle-analyzer 一样？

Answer 1

MultiCompiler 允许您创建不同的规则集并为不同的文件使用不同的插件，其中多目标仅允许您编译多个文件和输出。至于你的问题：

1. 基本上是的，多编译器不会并行运行，需要为每次编译加载配置、插件和规则集。因此它更灵活，但运行速度较慢，但​​是还有其他方法可以并行运行它，例如parallel-webpack

2. 您可以为您的 webpack 创建一个自定义插件，并使用它们的编译器挂钩来获取您想要的内容，更具体地说，我将检查asset-emissed 挂钩，如下所示：

    compiler.hooks.assetEmitted.tap(
      'MyPlugin',
      (file, { content, source, outputPath, compilation, targetPath }) => {
        console.log(content); // <Buffer 66 6f 6f 62 61 72>
      }
    );
   

   如果你想创建自己的插件，他们的这个指南是必不可少的：webpackwriting-a-plugin

3. 我能想到的最好的办法是来自webpack-bundle-analyzer npm 包：

打开后，报告会显示项目的所有 Webpack 块。可以使用侧边栏或块上下文菜单过滤到更具体的块列表。侧边栏 单击报告左上角的 > 按钮可以打开侧边栏菜单。您可以选择或取消选择要在“显示块”标题下显示的块。块上下文菜单 可以通过右键单击或按住 Ctrl 键单击报告中的特定块来打开块上下文菜单。它提供以下选项： 隐藏块：隐藏所选块 隐藏所有其他块：隐藏除所选块之外的所有块 显示所有块：取消隐藏任何隐藏块，将报告返回到其初始的、未过滤的视图

他们在文档中对此进行了澄清：

多重编译器：

MultiCompiler 模块允许 webpack 在单独的编译器中运行多个配置。如果 webpack 的 NodeJS api 中的 options 参数是一个选项数组，则 webpack 将应用单独的编译器，并在执行所有编译器后调用回调。

var webpack = require('webpack');

webpack([
  { entry: './index1.js', output: { filename: 'bundle1.js' }, ruleset1, pluginsA},
  { entry: './index2.js', output: { filename: 'bundle2.js' }, ruleset2, pluginsB }
], (err, stats) => { // [Stats Object](#stats-object)
  process.stdout.write(stats.toString() + '\n');
})

多入口点

如果您的配置创建了多个“块”（如多个入口点或使用 CommonsChunkPlugin 等插件时），则应使用替换来确保每个文件都有唯一的名称。

module.exports = {
  entry: {
    app: './src/app.js', // Will export to app.js
    search: './src/search.js', // Will export to search.js
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

另外，请查看webpack-code splitting