webpack中multi-compiler和multiple-entry-points的区别是什么?

5

大家好!我正尝试学习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

问题1:在多HTML页面配置中,各自有什么优点缺点

也许multi-compiler灵活性更大,但速度较慢

问题2:如果我使用了mutil-entry-point的配置,如何在插件或加载器中获取当前条目名称?

我知道webpack的作者说这在加载器中做不到, https://github.com/webpack/webpack/issues/6124#issuecomment-351647892

但在插件中呢?

问题3:是否有办法从条目获得整个依赖图?

像webpack-bundle-analyzer一样?

1个回答

2
MultiCompiler允许您创建不同的规则集并在不同的文件中使用不同的插件,而多目标只允许您编译多个文件并输出。至于您的问题:
  1. Basically yes, multi-compiler does not run in parallel and needs to load the configuration, plugins and rulesets for each compilation. So it is more flexible, but runs slower, there are however alternatives to run it in parallel like parallel-webpack

  2. You can create a custom plugin for your webpack and use their compiler-hooks to get what you want, more specifically I would check out the asset-emitted hook, that looks as follows:

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

    If you wish to create your own plugin, this guide of theirs is essential: webpack writing-a-plugin

  3. The best I can come up with is this from webpack-bundle-analyzer npm package :

打开报告后,可以显示项目的所有Webpack块。您可以使用侧边栏或块上下文菜单来过滤更具体的块列表。 侧边栏 侧边栏菜单可通过单击报告左上角的“>”按钮打开。您可以在“显示块”标题下选择或取消选择要显示的块。 块上下文菜单 在报告中右键单击或Ctrl + 单击特定块即可打开块上下文菜单。它提供以下选项: 隐藏块:隐藏所选块 隐藏所有其他块:隐藏除所选块之外的所有块 显示所有块:取消隐藏任何隐藏的块,返回报告到其初始未过滤视图
他们在他们的文档中澄清了这一点:
MultiCompiler:
MultiCompiler模块允许webpack在单独的编译器中运行多个配置。如果webpack的NodeJS api中的选项参数是选项数组,则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');
})

多入口

如果你的配置创建了多个“chunk”(例如使用多个入口或者使用像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',
  },
};

此处为HTML标签,大意为:“还要查看webpack代码分割”。

1
“webpack编写插件”链接只是跳转到了bundle analyzer包的网站。插件指南的URL是什么? - jdunning
1
请查看以下网址,了解如何编写Webpack插件:https://webpack.js.org/contribute/writing-a-plugin/ - mpmcintyre

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接