Webpack是JavaScript模块捆绑器。 Webpack采用具有依赖关系的模块并生成表示这些模块的静态资产。 Webpack的主要功能源于可扩展性，使开发人员能够在Web体系结构和Web性能中使用最佳实践。
有谁知道是否有办法更新Rails Webpacker生成的所有指纹？ 我有一个名为 manifest.js 的包标签，它是自动生成的，所以我无法更改内容，但有些眉头……
在 Webpack 5 生产 javascript 输出中保留一些注释
我想我要疯了，因为每个搜索引擎只向我抛出有关如何从输出文件中删除注释的结果，这与我搜索的内容完全相反😤 我使用所有默认值
NextJS 构建：类型错误：第一个参数必须是字符串类型或 Buffer、ArrayBuffer 或...类数组对象的实例。收到未定义
我正在尝试将 NextJS (v15.0.3) 应用程序部署到 Netlify。构建过程在“收集页面数据”步骤期间失败。每个页面都会产生以下错误： 2:25:13 PM：错误：Fai...
你知道如何将公共块移动到入口点吗？以前在 webpack-4 中，入口点和公共块可以使用相同的名称。但在 webpack-5 中我有这样的错误： 错误...
当我将 React 包放入 Html 脚本标签并通过浏览器打开 html 时，React 包不起作用
通常在使用 webpack 的生产和开发中，这工作得很好。但是当我将反应代码附加到常规 HTML 时，它不会自行安装。为什么？ 通常在使用 webpack 的生产和开发中，这工作得很好。但是当我将反应代码附加到常规 HTML 时，它不会自行安装。为什么？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,width=device-width" /> <title>Sit</title> </head> <body> <div id="modal-hook"></div> <div id="backdrop-hook"></div> <div id="root">444</div> <script> // Copy pasted React bundle here </script> </body> </html> 一个简单的 React 应用程序将从 html 页面加载。检查这个示例。 而一个成熟的应用程序不仅需要 react 捆绑文件。您应该添加所有必要的依赖项，例如 chunk/css/vendor 文件以及所有必需的 polyfills。并且 main 捆绑文件可能具有相关文件引用。 毕竟是代码捆绑后的一组JS文件。如果您以正确的格式添加所有必要的依赖项，它将加载而不会出现任何问题。 在捆绑文件中可以硬编码对其他文件的引用。 如果您将捆绑文件移到其他地方，则需要更新bundle.js内的引用
如何将目录中的所有“vue”文件包含到构建中而不显式导入它们
有没有办法在我的views/文件夹中构建所有.vue文件，而不将它们直接导入到我的vue应用程序中？ 我想要实现的是一个具有动态路由定义的路由器，这将是...
nextjs webpack 错误 - ./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet [1].rules[13].oneOf[12].use[2]!./node_modules/next...
JavaScript 在 Livewire 导航后无法工作，但可以在整个页面重新加载时工作 - Laravel
我正在使用 Laravel Livewire 在我的应用程序中进行导航。我的默认布局包括以下脚本： ... 我在我的应用程序中使用 Laravel Livewire 进行导航。我的默认布局包括以下脚本： <div class="flex grow"> <x-layouts.sidebar /> <!-- End of Sidebar --> <!-- Wrapper --> <div class="wrapper flex grow flex-col"> <!-- Header --> <x-layouts.header /> <main class="grow content pt-5" id="content" role="content"> {{ $slot }} </main> <x-layouts.footer /> <!-- End of Footer --> </div> <!-- End of Wrapper --> </div> <script src="v2/assets/js/core.bundle.js"></script> <script src="v2/assets/vendors/apexcharts/apexcharts.min.js"></script> <script src="v2/assets/js/widgets/general.js"></script> <script src="v2/assets/js/layouts/demo1.js"></script> 当我完全重新加载页面时，一切正常 - JavaScript 函数（例如切换侧边栏、下拉菜单和其他交互）按预期运行。但是，当我使用 Livewire.navigate 在组件之间导航时，JavaScript 停止工作。即使使用 Livewire 导航到同一页面也无法恢复功能。只有整页刷新才能解决该问题。 我尝试过的： Livewire 事件监听器： 我尝试使用 livewire:naviged、livewire:navigating 和 livewire:navigate 事件重新初始化脚本，如下所示： <script> document.addEventListener('livewire:navigated', () => { console.log('true working'); @php $scripts = [ public_path('v2/assets/js/core.bundle.js'), public_path('v2/assets/vendors/apexcharts/apexcharts.min.js'), public_path('v2/assets/js/widgets/general.js'), public_path('v2/assets/js/layouts/demo1.js'), ]; foreach ($scripts as $script) { if (file_exists($script)) { echo file_get_contents($script); } else { echo "// File not found: " . basename($script) . "\n"; } } @endphp }); </script> 事件侦听器触发，脚本加载到 DOM 中（通过“网络”选项卡验证），但导航后该功能不起作用。 手动添加脚本： 我在 webpackUniversalModuleDefinition 函数之外手动包含了一个自定义脚本文件，即使在 Livewire 导航之后它也能正常工作。这让我怀疑这个问题可能与语法或 Webpack 如何包装捆绑脚本有关。 怀疑和观察： Webpack通用模块定义： 脚本使用以下模式进行包装： (function webpackUniversalModuleDefinition(root, factory) { if (typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if (typeof define === 'function' && define.amd) define([], factory); else { var a = factory(); for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; } })(self, function() { // Module code here }); 我怀疑这种包装可能是该功能在 Livewire 导航后不起作用的原因，但我不确定为什么它在完全重新加载时起作用。 全球范围问题： 也许捆绑的脚本没有将其功能暴露给全局范围（窗口或自身），因此在 Livewire 部分更新后无法访问。 导航上的脚本执行： 我注意到，如果我在 Webpack 包装器之外添加逻辑（例如，直接在标签中或在脚本文件的底部），它就可以正常工作。这让我认为问题在于函数如何注册或初始化。 为什么 Webpack 封装的脚本在完全重新加载时可以工作，但在 Livewire 导航后却不能工作？ 问题是否与 Webpack 如何公开函数或将它们注册到全局范围有关？ 确保此类脚本在 Livewire 导航后无缝运行的最佳方法是什么？ 此问题是否与缓存、模块初始化或 Livewire 的部分 DOM 更新有关？ 我希望 JavaScript 功能（例如，侧边栏切换、下拉菜单等）在使用 Livewire.navigate 导航到新组件后正常工作，就像在整个页面重新加载后一样。 请参阅此链接：https://livewire.laravel.com/docs/navigate#dont-rely-on-domcontentloaded 你应该使用 livewire:navigated 而不是 DOMContentLoaded DOMContentLoaded仅在页面硬刷新后触发一次。但是当您使用 wire:navigate 在页面之间导航时，DOMContentLoaded 不再触发，而是可以使用 livewire:navigated 事件。它在页面硬刷新（如DOMContentLoaded）和页面之间导航后触发
我正在尝试构建一个将 NODE_ENV 设置为生产的 React docker 映像，但不断收到此错误： #0 11.74 > webpack --config webpack-prod.config.ts #0 11.74 #0 11.83 webpack 的 CLI 必须是
据我了解，webpack-merge 帮助我们将 webpack.config 文件分解为更易于管理的块，添加与环境相关的配置。 虽然我们将生产和
UnhandledSchemeError：这个节点是什么：缓冲区错误以及如何解决它？
下面粘贴的是我在 nextjs 中使用本地路由链接时收到的节点：缓冲区错误。有人知道如何解决这个问题吗？ 我看到：https://github.com/vercel/next.js/discussions/33982 谢谢...
问题 当使用 Webpack 将应用程序构建到单个包中时，库 migrate-mongo 无法找到迁移模式模块，例如 migrations/[some-number]-[some-name]-migration.js。 ...
如何告诉 webpack 在附加“.ts”扩展名之前删除“.js”？
我在这样的项目中导入了： 从“./ytheme.js”导入{ytheme}； 为什么？因为： https://www.typescriptlang.org/docs/handbook/2/modules.html#es-module-syntax 并附加 .js
为什么要在tappable Hook类的构造函数中将类方法重新分配给`this`？
以下是webpack可点击源代码中的代码： 类钩子{ 构造函数（参数= []，名称=未定义）{ this._args = args； // ... this.compile = this.compile; 这个.tap = 这个.t...
我正在将一个旧的 gulp 项目迁移到 webpack，并想知道是否可以制作一个不需要输入和输出选项的 webpack 项目，我有一系列需要的任务
我有一个使用 webpack 的 Angular 项目。 我还延迟加载应用程序的几个组件。 其中 2 个组件使用 d3 库。 自从我添加了第二个组件，t...
哪一个是@Angular-devkit/build-Angular:应用程序等效于@Angular-builders/custom-webpack
我们需要隐藏在角度应用程序的构建文件中组合在一起的环境变量。 我们找到了使用 @angular-builders/custom-webpack 和 dotenv 库的解决方案...
使用Webpack时new URL(import.meta.url).href的输出与Vite相比有什么不同？
我对新 URL(import.meta.url).href 在不同构建工具中的行为有疑问。 在我的 Webpack 项目中，它返回一个文件路径，如 file:///... 在我的 Vite 项目中，它返回一个...
如何仅捆绑我的 NextJS React 组件以便我可以将其注入到任何网站中？
我正在使用 NextJS 14.2.3，我想要这个依赖于 tailwindcss 的测试组件并做出反应，将其注入到 Wordpress/任何类型的网站中。 导入 React, { useEffect, useState } from 'rea...
我正在使用 Angular v17，配置允许将 subresourceIntegrity 设置为 true，这会将完整性哈希添加到导入编译的 Angular 项目的 标签中。 这是</desc> <question vote="1"> <p>我正在使用 Angular v17，配置允许将 <pre><code>subresourceIntegrity</code></pre> 设置为 <pre><code>true</code></pre>，这会将完整性哈希添加到导入编译的 Angular 项目的 <pre><code><script></code></pre> 标签中。</p> <p>这很简单也很棒，只是它只使用 sha384。我需要对校验和使用不同的算法（TL;DR...使用 AWS CLI 上传源文件，但它不支持 SHA384）</p> <p>我尝试使用自定义 webpack 文件并使用 <pre><code>hashFuncNames: ['sha256']</code></pre> 添加 webpack-subresource-integrity，例如：</p> <pre><code> ..., plugins: [ new SubresourceIntegrityPlugin({ enabled: true, hashFuncNames: ['sha256'], }), ... </code></pre> <p>但是，如果我在 angular.json 选项中将 <pre><code>subresourceIntegrity</code></pre> 设置为 true，它似乎会忽略我的设置并继续使用 sha384。如果我将 <pre><code>subresourceIntegrity</code></pre> 设置为 false，则不会设置完整性属性。</p> <p>我对 webpack 并不如我所愿，但尝试创建一个自定义插件来做类似的事情，但只是不知道如何让它工作。</p> <p>任何人都可以提供一个示例，说明如何使用完全可定制的index.ejs 文件、自定义插件、现有的 Angular 配置等来让我编译的index.html 文件具有以下内容：</p> <pre><code> <script src="main.js" integrity="sha256-aof08ans0df8yaf0" crossorigin="anonymous"></script> </code></pre> </question> <answer tick="false" vote="0"> <p>您必须在 <a href="https://github.com/angular/angular-cli/issues" rel="nofollow noreferrer"><pre><code>Angular Cli Github</code></pre></a> 上提出功能请求才能请求此自定义。目前它被硬编码为 <pre><code>sha384</code></pre>。</p> <h4><a href="https://github.com/angular/angular-cli/blob/20411f696eb52c500e096e3dfc5e195185794edc/packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts#L254" rel="nofollow noreferrer">Angular CLI - common.ts 源代码</a></h4> <pre><code> if (subresourceIntegrity) { extraPlugins.push( new SubresourceIntegrityPlugin({ hashFuncNames: ['sha384'], }), ); } </code></pre> </answer> </body></html>