首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >webpack的多编译器和多入口点有什么区别?

webpack的多编译器和多入口点有什么区别?
EN

Stack Overflow用户
提问于 2021-09-03 03:19:39
回答 1查看 745关注 0票数 2

伙计们!!我正在努力学习webpack和优化我的webpack项目(一个多页项目)的配置,但是我在一些problems.hope中被搞糊涂了,有人可以帮我。

顺便说一下,请原谅我没有一个好的英语,但我认为谷歌翻译应该基本上能够让我解释我的问题。如果描述中有什么不清楚的地方,请指出,我会修改它。

相关链接

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页面配置中,每个advantagesdisadvantages分别是什么?

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

Q2.如果我使用mutil-entry-point的配置,如何在插件或加载程序中获得当前的条目名?

我知道webpack的作者说在装载机上做不到这一点,https://github.com/webpack/webpack/issues/6124#issuecomment-351647892

但是插件呢?

Q3.有没有办法获得整个dependency graph from the entry

就像webpack包分析器?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-03 04:22:59

MultiCompiler允许您创建不同的规则集,并为不同的文件使用不同的插件,在这些文件中,多目标只允许您编译多个文件和输出。至于你的问题:

  1. 基本上是的,多编译器不会并行运行,需要为每个编译加载配置、插件和规则集。因此,它更灵活,但运行速度更慢,但是也有类似于平行-webpack的并行运行的替代方案。
  2. 您可以为您的webpack创建一个自定义插件,并使用他们的编译器钩获取您想要的东西,更具体地说,我将查看资产释放钩,如下所示: compiler.hooks.assetEmitted.tap(“MyPlugin”,(文件,{内容,源,outputPath,编译,targetPath }) => { console.log( content );// } ); 如果您想要创建您自己的插件,这是他们的指南是必要的:webpack写作插件
  3. 我能想到的最好的方法是来自webpack束分析仪npm软件包

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

他们在文件中澄清了这一点:

MultiCompiler

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

代码语言:javascript
运行
复制
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之类的插件),那么您应该使用替换来确保每个文件都有一个唯一的名称。

代码语言:javascript
运行
复制
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-码分裂

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69039100

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档