webpack 相关问题

NPM。从包中导入文件的路径

是否可以自定义从包中导入文件的路径？ 我有一个包，这是我们内部项目的 UI 工具包。现在使用 WebPack 构建后我有以下项目

Nuxt 3 是否同时使用 Vite 和 Webpack？

我正在阅读 Nuxt3 功能，我注意到 Nuxt3 使用两种不同的捆绑器： 维特 网页包5 为什么需要两个不同的捆绑器？ Vite 不应该取代 webpack 吗？

Next.js 应用程序不会从 React 组件套件加载捆绑的 CSS

我有一个 React 组件存储库。每个组件都有自己的 .css 文件，该文件会导入到组件中。然后使用汇总配置捆绑这些组件并发布为 NPM

如何将我的聊天机器人组件转换为 <script> 标签，以便任何人都可以在其网站中使用该 <script>，在 React.js 中？

我的 Next.js 应用程序中有一个正在运行的 Chatbot 组件。 现在我要创建一个功能，任何人都可以使用此组件的标签在自己的网站中使用此组件（集成它）。 我...

使用 webpack 5 升级到 Storybook 7 后页面刷新多次

描述错误 使用 webpack 5 升级到 Storybook 7 后循环重新加载页面 https://github.com/storybookjs/storybook/assets/8790510/99c6345f-8c8d-4148-980d-30b810a37e7e 重现 这是一个

如何在我的 Vue 应用程序中集成自定义 bulid CKEditor 5

我已经从 CKEditor 5 Online Builder 进行了自定义构建并下载了它，但它是在 Webpack 中构建的，我在 Vue 3 项目中使用 Vite。 我试过下面的代码： 导入CKEd...</desc> <question vote="0"> <p>我已经从 <a href="https://ckeditor.com/ckeditor-5/online-builder/" rel="nofollow noreferrer">CKEditor 5 Online Builder</a> 进行了自定义构建并下载了它，但它是在 Webpack 中构建的，我在 Vue 3 项目中使用 Vite。</p> <p>我尝试过以下代码：</p> <pre><code>&lt;script setup&gt; import CKEditor from &#34;@/ckeditor5-custom-build/build/ckeditor&#34; import { component as ckeditor } from &#34;@ckeditor/ckeditor5-vue&#34;; const editor = ref(CKEditor); const editorData = ref(&#34;&#34;); const editorConfig = ref({}); &lt;/script&gt; &lt;template&gt; &lt;ckeditor :editor=&#34;editor&#34; :config=&#34;editorConfig&#34; v-model=&#34;editorData&#34;&gt;&lt;/ckeditor&gt; &lt;/template&gt; </code></pre> <p>我遇到以下错误：</p> <blockquote> <p>找不到模块：错误：无法解析“ckeditor5-custom-build/build/ckeditor”</p> </blockquote> </question> <answer tick="false" vote="0"> <p>从<a href="https://ckeditor.com/ckeditor-5/online-builder/" rel="nofollow noreferrer">CKEditor 5 Online Builder</a>下载构建zip文件后。解压 zip 并转到文件夹打开 package.json 文件</p> <pre><code>{ ... &#34;dependencies&#34;: { &#34;@ckeditor/ckeditor5-alignment&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-autoformat&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-basic-styles&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-block-quote&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-cloud-services&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-editor-classic&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-essentials&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-font&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-heading&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-image&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-indent&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-link&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-list&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-media-embed&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-paragraph&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-paste-from-office&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-table&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-typing&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-undo&#34;: &#34;41.2.1&#34;, &#34;@ckeditor/ckeditor5-upload&#34;: &#34;41.2.1&#34; }, ... } </code></pre> <p>从 package.json 文件中复制除 devDependency 之外的所有依赖项，并将其粘贴到项目 package.json 文件中，然后运行 <pre><code>npm i</code></pre> 命令</p> <p>转到解压文件夹中的 <pre><code>src</code></pre> 子文件夹并打开 <pre><code>ckeditor.ts</code></pre> 文件</p> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="false"> <div> <pre><code>/** * @license Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ import { ClassicEditor } from &#39;@ckeditor/ckeditor5-editor-classic&#39;; import { Alignment } from &#39;@ckeditor/ckeditor5-alignment&#39;; import { Autoformat } from &#39;@ckeditor/ckeditor5-autoformat&#39;; import { Bold, Italic, Strikethrough, Underline } from &#39;@ckeditor/ckeditor5-basic-styles&#39;; import { BlockQuote } from &#39;@ckeditor/ckeditor5-block-quote&#39;; import { CloudServices } from &#39;@ckeditor/ckeditor5-cloud-services&#39;; import type { EditorConfig } from &#39;@ckeditor/ckeditor5-core&#39;; import { Essentials } from &#39;@ckeditor/ckeditor5-essentials&#39;; import { FontBackgroundColor, FontColor, FontFamily, FontSize } from &#39;@ckeditor/ckeditor5-font&#39;; import { Heading } from &#39;@ckeditor/ckeditor5-heading&#39;; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from &#39;@ckeditor/ckeditor5-image&#39;; import { Indent } from &#39;@ckeditor/ckeditor5-indent&#39;; import { AutoLink, Link, LinkImage } from &#39;@ckeditor/ckeditor5-link&#39;; import { List, ListProperties } from &#39;@ckeditor/ckeditor5-list&#39;; import { MediaEmbed } from &#39;@ckeditor/ckeditor5-media-embed&#39;; import { Paragraph } from &#39;@ckeditor/ckeditor5-paragraph&#39;; import { PasteFromOffice } from &#39;@ckeditor/ckeditor5-paste-from-office&#39;; import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from &#39;@ckeditor/ckeditor5-table&#39;; import { TextTransformation } from &#39;@ckeditor/ckeditor5-typing&#39;; import { Undo } from &#39;@ckeditor/ckeditor5-undo&#39;; import { Base64UploadAdapter } from &#39;@ckeditor/ckeditor5-upload&#39;; // You can read more about extending the build with additional plugins in the &#34;Installing plugins&#34; guide. // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details. class Editor extends ClassicEditor { public static override builtinPlugins = [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ]; public static override defaultConfig: EditorConfig = { toolbar: { items: [ &#39;heading&#39;, &#39;|&#39;, &#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;alignment&#39;, &#39;|&#39;, &#39;link&#39;, &#39;strikethrough&#39;, &#39;bulletedList&#39;, &#39;numberedList&#39;, &#39;|&#39;, &#39;outdent&#39;, &#39;indent&#39;, &#39;|&#39;, &#39;fontSize&#39;, &#39;fontFamily&#39;, &#39;|&#39;, &#39;fontBackgroundColor&#39;, &#39;fontColor&#39;, &#39;|&#39;, &#39;imageUpload&#39;, &#39;|&#39;, &#39;undo&#39;, &#39;redo&#39; ] }, language: &#39;en&#39;, image: { toolbar: [ &#39;imageTextAlternative&#39;, &#39;toggleImageCaption&#39;, &#39;imageStyle:inline&#39;, &#39;imageStyle:block&#39;, &#39;imageStyle:side&#39;, &#39;linkImage&#39; ] }, table: { contentToolbar: [ &#39;tableColumn&#39;, &#39;tableRow&#39;, &#39;mergeTableCells&#39;, &#39;tableCellProperties&#39;, &#39;tableProperties&#39; ] } }; } export default Editor;</code></pre> </div> </div> <p></p> <p>从<pre><code>ckeditor.ts</code></pre>文件中复制所有导入语句</p> <p>创建名为 <pre><code>Editor.vue</code></pre> 的新 Vue 文件并粘贴导入语句</p> <p>编辑器.vue</p> <pre><code>&lt;script setup&gt; import { ClassicEditor } from &#39;@ckeditor/ckeditor5-editor-classic&#39;; import { Alignment } from &#39;@ckeditor/ckeditor5-alignment&#39;; import { Autoformat } from &#39;@ckeditor/ckeditor5-autoformat&#39;; import { Bold, Italic, Strikethrough, Underline } from &#39;@ckeditor/ckeditor5-basic-styles&#39;; import { BlockQuote } from &#39;@ckeditor/ckeditor5-block-quote&#39;; import { CloudServices } from &#39;@ckeditor/ckeditor5-cloud-services&#39;; import type { EditorConfig } from &#39;@ckeditor/ckeditor5-core&#39;; import { Essentials } from &#39;@ckeditor/ckeditor5-essentials&#39;; import { FontBackgroundColor, FontColor, FontFamily, FontSize } from &#39;@ckeditor/ckeditor5-font&#39;; import { Heading } from &#39;@ckeditor/ckeditor5-heading&#39;; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from &#39;@ckeditor/ckeditor5-image&#39;; import { Indent } from &#39;@ckeditor/ckeditor5-indent&#39;; import { AutoLink, Link, LinkImage } from &#39;@ckeditor/ckeditor5-link&#39;; import { List, ListProperties } from &#39;@ckeditor/ckeditor5-list&#39;; import { MediaEmbed } from &#39;@ckeditor/ckeditor5-media-embed&#39;; import { Paragraph } from &#39;@ckeditor/ckeditor5-paragraph&#39;; import { PasteFromOffice } from &#39;@ckeditor/ckeditor5-paste-from-office&#39;; import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from &#39;@ckeditor/ckeditor5-table&#39;; import { TextTransformation } from &#39;@ckeditor/ckeditor5-typing&#39;; import { Undo } from &#39;@ckeditor/ckeditor5-undo&#39;; import { Base64UploadAdapter } from &#39;@ckeditor/ckeditor5-upload&#39;; &lt;script&gt; </code></pre> <p>安装<pre><code>@ckeditor/ckeditor5-vue</code></pre>包并导入它</p> <pre><code>&lt;script setup&gt; import { ClassicEditor } from &#39;@ckeditor/ckeditor5-editor-classic&#39;; ... ... ... import { component as ckeditor } from &#34;@ckeditor/ckeditor5-vue&#34;; /** &lt;-- Here like this **/ const editor = ref(ClassicEditor); const editorData = defineModel(); const editorConfig = ref({ plugins: [] }) &lt;script&gt; &lt;template&gt; &lt;ckeditor :editor=&#34;editor&#34; :config=&#34;editorConfig&#34; v-model=&#34;editorData&#34;&gt;&lt;/ckeditor&gt; &lt;/template&gt; </code></pre> <p>打开<pre><code>ckeditor.ts</code></pre>并复制builtinPlugins数组中的所有元素</p> <pre><code>... class Editor extends ClassicEditor { public static override builtinPlugins = [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ]; ... </code></pre> <p>返回 Editor.vue 文件并将其粘贴到 <pre><code>editorConfig</code></pre> 变量插件属性</p> <pre><code>... const editor = ref(ClassicEditor); const editorData = defineModel(); const editorConfig = ref({ plugins: [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ], }); ... </code></pre> <p>打开 ckeditor.ts 并复制具有值的所有属性 <pre><code>defaultConfig</code></pre> 并将其粘贴到 Editor.vue</p> <pre><code>&lt;script setup&gt; import { ClassicEditor } from &#39;@ckeditor/ckeditor5-editor-classic&#39;; import { Alignment } from &#39;@ckeditor/ckeditor5-alignment&#39;; import { Autoformat } from &#39;@ckeditor/ckeditor5-autoformat&#39;; import { Bold, Italic, Strikethrough, Underline } from &#39;@ckeditor/ckeditor5-basic-styles&#39;; import { BlockQuote } from &#39;@ckeditor/ckeditor5-block-quote&#39;; import { CloudServices } from &#39;@ckeditor/ckeditor5-cloud-services&#39;; import { Essentials } from &#39;@ckeditor/ckeditor5-essentials&#39;; import { FontBackgroundColor, FontColor, FontFamily, FontSize } from &#39;@ckeditor/ckeditor5-font&#39;; import { Heading } from &#39;@ckeditor/ckeditor5-heading&#39;; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from &#39;@ckeditor/ckeditor5-image&#39;; import { Indent } from &#39;@ckeditor/ckeditor5-indent&#39;; import { AutoLink, Link, LinkImage } from &#39;@ckeditor/ckeditor5-link&#39;; import { List, ListProperties } from &#39;@ckeditor/ckeditor5-list&#39;; import { MediaEmbed } from &#39;@ckeditor/ckeditor5-media-embed&#39;; import { Paragraph } from &#39;@ckeditor/ckeditor5-paragraph&#39;; import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from &#39;@ckeditor/ckeditor5-table&#39;; import { TextTransformation } from &#39;@ckeditor/ckeditor5-typing&#39;; import { Undo } from &#39;@ckeditor/ckeditor5-undo&#39;; import { Base64UploadAdapter } from &#39;@ckeditor/ckeditor5-upload&#39;; import { component as ckeditor } from &#34;@ckeditor/ckeditor5-vue&#34;; const editor = ref(ClassicEditor); const editorData = defineModel(); const editorConfig = ref({ plugins: [ Alignment, AutoImage, AutoLink, Autoformat, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo ], toolbar: { items: [ &#39;heading&#39;, &#39;|&#39;, &#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;alignment&#39;, &#39;|&#39;, &#39;link&#39;, &#39;strikethrough&#39;, &#39;bulletedList&#39;, &#39;numberedList&#39;, &#39;|&#39;, &#39;outdent&#39;, &#39;indent&#39;, &#39;|&#39;, &#39;fontSize&#39;, &#39;fontFamily&#39;, &#39;|&#39;, &#39;fontBackgroundColor&#39;, &#39;fontColor&#39;, &#39;|&#39;, &#39;imageUpload&#39;, &#39;|&#39;, &#39;undo&#39;, &#39;redo&#39; ] }, language: &#39;en&#39;, image: { toolbar: [ &#39;imageTextAlternative&#39;, &#39;toggleImageCaption&#39;, &#39;imageStyle:inline&#39;, &#39;imageStyle:block&#39;, &#39;imageStyle:side&#39;, &#39;linkImage&#39; ] }, table: { contentToolbar: [ &#39;tableColumn&#39;, &#39;tableRow&#39;, &#39;mergeTableCells&#39;, &#39;tableCellProperties&#39;, &#39;tableProperties&#39; ] }, heading: { options: [ { model: &#39;paragraph&#39;, title: &#39;Paragraph&#39;, class: &#39;ck-heading_paragraph&#39; }, { model: &#39;heading1&#39;, view: &#39;h1&#39;, title: &#39;Heading 1&#39;, class: &#39;ck-heading_heading1&#39; }, { model: &#39;heading2&#39;, view: &#39;h2&#39;, title: &#39;Heading 2&#39;, class: &#39;ck-heading_heading2&#39; }, { model: &#39;heading3&#39;, view: &#39;h3&#39;, title: &#39;Heading 3&#39;, class: &#39;ck-heading_heading3&#39; }, { model: &#39;heading4&#39;, view: &#39;h4&#39;, title: &#39;Heading 4&#39;, class: &#39;ck-heading_heading4&#39; }, { model: &#39;heading5&#39;, view: &#39;h5&#39;, title: &#39;Heading 5&#39;, class: &#39;ck-heading_heading5&#39; }, { model: &#39;heading6&#39;, view: &#39;h6&#39;, title: &#39;Heading 6&#39;, class: &#39;ck-heading_heading6&#39; } ] } }); &lt;/script&gt; &lt;template&gt; &lt;ckeditor :editor=&#34;editor&#34; :config=&#34;editorConfig&#34; v-model=&#34;editorData&#34;&gt;&lt;/ckeditor&gt; &lt;/template&gt; </code></pre> <p>现在将编辑器组件导入项目中的任何位置</p> <pre><code>&lt;script setup&gt; import { ref } from &#34;vue&#34;; import Editor from &#39;@/components/Editor&#39;; const description = ref(&#34;&#34;); &lt;script&gt; &lt;template&gt; &lt;Editor v-model=&#34;description&#34;/&gt; &lt;template&gt; </code></pre> </answer> </body></html>

还有其他人经历过：“NX 无法找到‘app’的 externalDependency ‘webpack-cli’”错误吗？

我已经使用@nx v18.1.2有一段时间了（目前主要是在试验），但每隔一段时间，我会在构建nestjs或特定的角度应用程序时看到以下错误消息...

react-snap 指向 js 和 css 中图像的 localost:4567

我做了一个简单的React项目，其中包含一个css文件和一个使用img标签来显示图像的react组件。 css 只是在 body 中使用背景图像。 包.json： { “名字……

尝试导入supabase客户端时出现Webpack错误

我正在开发一个 Azure DevOps 扩展，我对这种开发非常陌生。我正在使用 Microsoft Github 的官方示例 https://github.com/microsoft/azure-devops-extension-sampl...

找不到模块：错误：无法解析模块“semantic-ui-css”

我正在尝试使用 Webpack + Semantic UI 但没有成功。 我试过... npm 我语义-ui-css 在我的index.js..从'semantic-ui-css'导入语义 我将配置添加到 webpack.config.js 中

当我尝试运行 React18 应用程序时出现数字信封错误

由于某些奇怪的原因，我正在工作的 React18 应用程序现在已经损坏，并且我没有在节点模块或脚本等方面进行任何更改。现在，当我使用 npm run dev 运行应用程序时，出现以下错误 错误：e...

Webpack 通过 CDN 导入到 vue js 请求的模块“url”不提供名为“default”的导出

希望你一切都好。我目前正在开发一个 JavaScript 模块，计划使用 URL https://x.com/my-script.js 通过内容交付网络 (CDN) 加载该模块。然而，我遇到了一个障碍...

Webpack 5 错误 - 尽管使用自定义配置和自定义条目值仍尝试加载默认入口点

正在从 Webpack v.4 更新到 v.5。 正如标题所示，尽管项目根目录存在 webpack.config.js，但 Webpack 会触发错误，因为它无法找到 ./src/index.j...

当我部署新的构建时，更改不会反映出来，因为浏览器缓存了构建文件

在反应应用程序中。当我部署新的构建时，更改不会反映出来，因为浏览器会缓存构建文件。如何确保每个新结构都被缓存？

如何防止React应用程序构建被缓存？

我使用 create React app 创建了一个 React 应用程序。每当我部署新的构建时，这些更改都不会反映出来，因为浏览器已缓存了构建文件。我如何确保每个新版本都不会...

手动刷新或输入时，React-router 链接不起作用

我正在使用 React-router，当我单击链接按钮时它工作正常，但是当我刷新网页时它会显示一个空的白屏。并且也没有控制台警告，并返回 200...

尽管在 gatsby webpack 配置中将 optimization.splitchunks 设置为 false，为什么我仍然收到分块代码？

我用 Gatsby React 编写了静态 Web 应用程序，我想禁用以块形式生成 javascript 代码的 webpack 选项，因为我们遇到了一些块加载错误，并且...

Next.js 弃用警告

每次构建 Next.js 应用程序时，我都会收到弃用警告： （节点：10504）[DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning：Module.updateHash：使用新的 ChunkGraph 应用程序编程接口 （使用 `node --trace-depre...

未捕获的运行时错误：等待层“根”准备就绪时超时

由于需要加载器，我们的应用程序需要 Webpack 来升级到最新版本的第三方库。已尝试使用各种方法来查明问题的根源...

在 Webpack 5 中禁用 CSS/SASS/SCSS/LESS URL 解析

在 SASS 中，我有一个 CSS 规则，其 URL 如下所示： .eSearchFAQsAccord-q { ＆：：后 { 内容： url("./images/caret.svg"); } } 默认情况下，Webpack 会解决这个问题（尽管...