问题标签 [webpack-bundle]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
328 浏览

javascript - webpack 包中的导出顺序

对于这样的代码:

Webpack 创建以下内容:

由于在执行脚本时尚未定义getter 内部function() { return top; },这如何工作?top

Webpack 在顶部而不是底部创建导出是否有特殊原因?

谢谢。

0 投票
2 回答
2191 浏览

javascript - react antd 大型生产包

Webpack 输出一个非常大的包:1.5MB 最小化

我根据文档导入单个组件,使用导入 'antd/lib/...'
这些是我的导入:

我只使用了 5 个组件。捆绑包大小这么大有意义吗?我自己的代码相当小——大约 15KB 没有缩小。

更新:使用IgnorePlugin()片刻后,我的包大小变小了 300KB。1.5MB 还是很大的。

Bellow 是 webpack 配置文件。

webpack.config.js:

webpack.prod.js(用于制作捆绑包):

0 投票
0 回答
177 浏览

webpack - 从 webpack stats 文件中的模块大小计算资产大小

stats.jsonWebpack 创建的文件是这样放置的,一个或多个modules组成一个 . chunk,一个或多个块组成一个asset.

在此处输入图像描述

我试图通过对构成资产的模块的大小(组成块)求和来计算资产的大小。在下面的代码片段中,您可以假设这jsonContents是整个 webpack stats.json 文件,chunkToModulesDict是一个字典,说明了组成块的模块是什么,并且moduleSizeDict是模块名称及其相应大小的字典。

我观察到统计文件中报告的资产大小与上述计算的资产大小不符。但是,在根据 stats.json 文件中报告的资产大小绘制计算出的资产大小时,我发现这些图表具有相似的形状。

在此处输入图像描述

我验证了我的假设,即计算值和报告值高度相关。

在此处输入图像描述

我的问题是如何更精确地计算模块中资产的大小,以使计算出的大小与统计文件中报告的大小相匹配。我正在尝试比较两个统计文件,并了解哪些资产的大小发生了变化,以及哪些模块对这些变化贡献了多少。webpack-bundle-analyzer是一个很棒的工具,但是,我希望创建一份简短的更改报告,而不必花时间分析 UI)

0 投票
0 回答
220 浏览

javascript - 如何检测我的代码是否作为 Webpack 包执行

我目前正在尝试使用以下策略从相对于我的模块的路径动态加载 json 文件:

  • 如果我的代码被捆绑为 Webpack 包,请使用import(filename.json)
  • 在任何其他情况下,使用绝对路径回退到 AJAX 调用

以下似乎工作正常:

但是,我在 上找不到任何文档webpackJsonp,所以我认为这不是 Webpack 的公共 API 的一部分。

我还注意到这webpackJsonp是 3.12 中的一个函数和 4.28 中的一个Object(继承自Array),表明依赖webpackJsonp.

是否有(面向未来的)可靠方法测试我的代码是否使用公共 API 作为 Webpack 包运行?

基本上,我应该用什么来代替typeof webpackJsonp !== "undefined",以达到相同的效果,但使用公共 API?

此外,我在让实际导入在 Webpack 4.28 中工作时也遇到了一些问题。请参阅Angular 7.2.3 + Webpack 4.28中的 import() 中断。

0 投票
2 回答
3739 浏览

html - Html-loader + file-loader 未绑定正确的图像源

我计划将 Webpack 用于一个项目,并且我正在使用 Html-loader + file-loader 设置我的工作流程,以获取带有动态 src 的生产 html 文件,正如 Colt Steele 在此视频中所教的那样。这是我的 src/ 文件:

索引.html

index.js:

和 main.css

这些是我的配置文件(我有一个用于开发和生产的个人以及两者的共同点):

webpack.common.js:

webpack.dev.js:

和 webpack.prod.js:

但是,当我运行 npm run build 时,它会执行以下命令:

我得到了带有 assets/img/[name].[hash].[ext] 的预期 dist 文件夹,但是在我的 index.html 中我没有得到预期的 src 标签:

我一直在尝试解决这个问题一段时间,但我似乎无法在任何地方得到正确的答案,到目前为止我尝试过的任何方法都没有奏效。如果遇到此问题的任何人都可以解决他们如何解决它,或者如果有人知道问题可能是什么以及我能做什么,我将不胜感激。提前致谢!

0 投票
0 回答
36 浏览

reactjs - 将 webpack react bundle 动态注入到正在运行的页面中

我有一个看起来像这样的 react webpack 捆绑页面包装器:

我想在 CONTENT 区域中注入另一个包,我们称之为第 1 页,并希望它能够与我拥有的一些全局实例交互,这些实例可以与页脚交互并更新其内容。


我成功下载了第 1 页捆绑包,并成功将其注入内容区域。但捆绑包是隔离的,无法访问(或我不知道如何)第一个捆绑包中的实例。

如何使两个捆绑包进行通信?

0 投票
1 回答
757 浏览

vue.js - 将 webpack-bundle-tracker 从 vue.config.js 配置到 quasar.conf.js

我有一个使用此配置运行的 Vuejs 应用程序:

文件 webpack-stats.json 是这样的:

关于如何为 quasar.conf.js 翻译这个的任何提示?

0 投票
0 回答
109 浏览

reactjs - Webpack 创建多个以数字为前缀的捆绑文件

我是 webpack 的新手,并使用它将我的反应应用程序捆绑到单个捆绑文件中。但是,当我运行npx webpack命令时,它会创建多个以随机数为前缀的捆绑文件。

是否有任何 webpack 配置可以帮助我避免生成多个以随机数为前缀的捆绑文件并可以帮助我生成单个捆绑文件?

我的 webpack 配置是

0 投票
0 回答
22 浏览

webpack - 将 webpack 捆绑跟踪器从 0.4.3 更新到 1.4.0 时,未在 webpack-stats.json 中生成供应商块

将 webpack5 用于前端使用 js 和 scss,后端使用 django 的项目。我收到 npm audit 警告,将 webpack 捆绑跟踪器的版本更新到 1.4.0。我有一个在 webpack-stats.json 中生成的供应商块。更新到较新版本后,将 webpack 捆绑跟踪器从 0.4.3 更新到 1.4.0 时,不会在 webpack-stats.json 中生成供应商块。此外,将 djando-webpack-uploader 更新到最新版本以检查兼容性问题。这在渲染页面 @: 时会出错{% render_bundle 'vendor' 'css' %}。我是否需要更改任何其他内容才能更新到新版本的 webpack-bundle-tracker?

我在配置文件中使用 splitchunks: