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 允许您创建不同的规则集并为不同的文件使用不同的插件，其中 multi-target 只允许您编译多个文件和输出。至于你的问题：

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

2. 你可以为你的 webpack 创建一个自定义插件并使用他们的compiler-hooks 来获得你想要的东西，更具体地说，我会查看asset-emitted hook，如下所示：

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

   如果您想创建自己的插件，他们的指南是必不可少的：webpack writing-a-plugin

3. 我能想到的最好的就是来自webpack-bundle-analyzer npm package：

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

他们在文档中阐明了这一点：

MultiCompiler:

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

Multiple-entrypoints

如果您的配置创建了多个“块”（例如使用多个入口点或使用 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