webpack 相关问题

HMR 尚未针对模块块格式实现

我已经将我的 webpack 项目转换为输出 ES6： 实验：{ 输出模块：true }, 输出： { 图书馆： { 类型：'模块' } }, 现在，当我在开发模式下运行时（

重新运行 webpack 入口点

如果我以编程方式包含一个 标签，其 src 属性指向 webpack 入口点，则运行时会在第一次附加到 DOM 时执行它。但是，如果我随后删除...</desc> <question vote="0"> <p>如果我以编程方式包含一个 <pre><code>&lt;script&gt;</code></pre> 标签，其中 <pre><code>src</code></pre> 属性指向 webpack 入口点，则运行时会在第一次附加到 DOM 时执行它。但是，如果我随后删除该脚本标记并重新插入具有相同 <pre><code>src</code></pre> 的新脚本标记，则它不会再次运行（即使附加了缓存清除查询字符串）。大概这是由于 webpack 的运行时模块缓存或类似的原因（但手动弹出 webpackChunk 数组不起作用：块被重新添加到数组中而无需重新运行脚本）。然而，我需要这个脚本在每次重新插入 DOM 时重新运行。我怎样才能实现这个目标？</p> </question> <answer tick="false" vote="-1"> <p>为了确保 webpack 入口点脚本每次重新插入 DOM 时都能重新运行，如果还没有尝试过，您可以尝试一下：</p> <p>禁用缓存：确保浏览器不缓存脚本。每次插入脚本时，您可以将唯一的查询字符串附加到脚本的 src 属性。这可以通过添加时间戳或随机数来完成，如下所示：script.src = 'your-script.js?' + new Date().getTime();.</p> <p>使用动态导入：使用动态导入来加载模块，而不是插入脚本标签。这可以使用 JavaScript 的 import() 函数来完成，该函数返回解析为模块的承诺。这种方法可确保每次导入模块时都会重新评估该模块。</p> <p>Webpack 配置：检查您的 webpack 配置以确保运行时缓存不会阻止脚本重新运行。您可能需要调整输出或优化设置以禁用或修改缓存行为。</p> <p>自定义事件：如果脚本设计为运行特定函数，请考虑公开该函数并在重新插入脚本后直接调用它。这样<a href="https://www.appoly.co.uk/services/website-development/" rel="nofollow noreferrer">，</a>您可以手动触发所需的行为，而不需要依赖脚本的自动执行。</p> <p>Service Worker：如果适用，请确保 Service Worker 不会干扰脚本加载。服务工作人员可以缓存请求并从缓存中提供服务，从而防止脚本重新运行。</p> </answer> </body></html>

使用模块联合在 Angular 17 主机应用程序和 Angular 14 远程应用程序中加载远程模块时出现“进程未定义”错误

问题： 当我尝试通过 Angular 17 主机应用程序中的模块联合加载远程 Angular 模块时，遇到进程未定义错误。远程应用程序正在使用 Angular 14。我正在使用 M...

使用带有 webpack 模板的 electro-forge 的 puppeteer-extra-plugin-stealth 时找不到模块“is-plain-object”错误

当使用 puppeteer-extra-plugin-stealth 与带有 webpack 模板的 electro-forge 时，当您运行 npm start 时，您将收到错误。 应用程序在加载期间抛出错误 错误：找不到模块“is-pl...

如何解决：配置对象无效。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化？

我有一个工作项目 React + typescript，可以与 Babel 和 Webpack 配合使用。当我编写代码时，突然出现此错误： “配置对象无效。Webpack 已初始化...

UnhandledSchemeError：插件不处理从“node:zlib”读取（未处理的方案）

任何人都可以帮助解决这个错误吗？我已经尝试使用polyfills和我可以在网上找到并自己思考的所有其他解决方案来解决，但我仍然不断遇到问题

Babel：在 Shakapacker + React + Typescript 上找不到模块“@babel/plugin-proposal-class-properties”

环境：[Rails 6.0.6、React、Typescript、Shakapacker、Yarn] 这是一个不寻常的错误，我找不到任何其他类似问题或 Github 问题的答案。 运行 Rails 资产时：

Webpack watchOptions.ignored – 排除某些目录被忽略

对于 webpack 的 watch 功能，watchOptions.ignored 允许我指定要忽略的任何匹配模式，如下所示： 模块. 导出 = { //... 观看选项：{ 忽略：['files/**/*.js', 'node_mod...

在nextjs中使用@module-federation/rsbuild-plugin公开的组件

我有与这个问题完全相同的问题，但该解决方案对我不起作用:(。 我的情况的不同之处在于我的远程组件由 @module-federation/rsbuild-plugin 公开。 ...

Webpack web-workers 加载程序不工作

我正在使用 webpack 构建一个应用程序，我正在尝试添加一些网络工作人员，我正在使用内置插件来加载它们，但我按照此处的示例（官方存储库）进行操作，但我无法做不到...

如何使用 Webpack 5 加载 Service Worker？

我正在使用 Webpack 5，我希望有一个 Service Worker 能够拦截获取请求并在本地返回响应，而无需访问网络。我还希望能够导入 npm 模块...

Webpack 和 TypeScript - 没有转译和缺失代码

这让我发疯。 我有一个非常简单的 webpack/typescript 设置，但由于某种原因，在输出包中没有转译为 ES5，并且模块不包含在包中......

找不到全局sharp-cli包使用的sharp实例

尝试运行 Web 版 Expo 时，在...的根目录中创建名为 webpack.config.js 的文件后，出现错误“无法找到全局 Sharp-cli 包使用的 Sharp 实例”

将 LESS 文件转换为 CSS 模块

我正在尝试将 LESS 文件的遗留代码库转换为 CSS 模块。 我将 webpack 的 css-loader 更新为如下所示： { 加载器：'css-loader'， 选项： { 模块：{ // 现在，...

webpack 4 提供背景： url([object Module]) 作为背景图像

我在设置 web-pack 4 和 svg-sprite-loader 将 svg 图标渲染为背景图像时遇到问题。我遵循 svg-sprite-loader 官方文档中的这些说明（https://git...

运行 React App 时出现“无效的主机标头”

我有一个简单的 React JS 项目，并且正在部署到 OSE 中。我还在我的项目中使用以下依赖项。 "webpack": "^2.2.0", "webpack-dev-server": "^1.14.1", “反应”：“^15.5.4...

无法扩展 Highcharts 以使用 Angular 18 中的导出模块：

我们可以将 highcharts 导出为不同的格式，如 png、jpeg、xlsx 等。我们最近从 Angular 14 升级到 Angular 18。突然，此功能无法正常工作并出现以下错误：

webpack-dev-server WebSocket 错误：在 TCP.onStreamRead 处读取 ECONNRESET

我在 websocket 代理 ws/** 中面临这个问题： [webpack-dev-server] [HPM] 升级到 WebSocket [webpack-dev-server] [HPM] WebSocket 错误：错误：读取 ECONNRESET 我在使用 websocket 代理时遇到这个问题 ws/**: <i> [webpack-dev-server] [HPM] Upgrading to WebSocket <e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET <e> at TCP.onStreamRead (node:internal/stream_base_commons:217:20) { <e> errno: -4077, <e> code: 'ECONNRESET', <e> syscall: 'read' <e> } 我已在最底部附加了我的配置和软件包版本。 最初将 webpack 从版本 4 迁移到版本 5。在版本 4 中没有观察到此问题。即使现在切换到项目的旧版本，使用 /ws/** 套接字时也不会出现此错误。 Web套接字本身可以正常接收数据，但是每次与Web套接字交互时IDE控制台都会显示此错误。我试过： 添加字段 webSocketTransport、webSocketURL 和 webSocketServer 将 webpack 包更新到最新版本 直接安装最新版本的ws包 软件包版本： "webpack": "^5.89.0", "webpack-bundle-analyzer": "^4.10.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1", "html-webpack-plugin": "^5.6.0", Webpack 配置： "use strict"; const webpack = require("webpack"); const path = require("path"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { DefinePlugin } = require('webpack'); const Xliff2Json = require("./Xliff2Json"); const ip = require("ip"); const DEV_IP_ADDR = ip.address(); const DEV_PORT = 5002; const ASSET_PATH = process.env.ASSET_PATH || "/"; const API_DOMAIN = ""; const API_PORT = ""; const isDevelopment = process.argv[process.argv.indexOf('--mode') + 1] === 'development'; const webpackConfig = { entry: ["@babel/polyfill", "./src/index.jsx"], output: { filename: isDevelopment ? "[name].bundle.js" : "[contenthash].bundle.js", path: path.resolve(__dirname, "dist"), publicPath: "/", library: "app", }, devServer: { port: DEV_PORT, host: DEV_IP_ADDR, historyApiFallback: true, devMiddleware: { publicPath: ASSET_PATH, stats: "minimal", }, client: { logging: "info", overlay: { errors: true, warnings: false, runtimeErrors: true, }, webSocketTransport: 'ws', webSocketURL: `ws://${DEV_IP_ADDR}:${DEV_PORT}/ws`, }, webSocketServer: 'ws', static: { directory: path.join(__dirname, "dist"), }, open: true, hot: true, liveReload: true, proxy: [ { context: [ "/api/**", "/stream/sse/**", "/download/**" ], target: "https://my-instance.com", secure: false, changeOrigin: true, }, { context: [ "/ws/**", "/stream/ws/**" ], target: "wss://my-instance.com", ws: true, secure: false, changeOrigin: true, }, ], }, module: { rules: [ { test: /\.(css|scss)$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader" ], }, { test: /\.(jsx|js)$/, exclude: /(node_modules)/, use: { loader: "babel-loader", }, }, { test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/, type: 'asset/resource', } ], }, resolve: { extensions: [".js", ".jsx"], }, plugins: [ new webpack.ProgressPlugin(), new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: isDevelopment ? "[id].css" : "[contenthash].css", ignoreOrder: true }), new HtmlWebpackPlugin({ inject: true, hash: true, favicon: "./src/static/images/favicon.png", template: "./src/index.html", filename: "index.html", }), new DefinePlugin({ API_DOMAIN: `"${API_DOMAIN}"`, API_PORT: `"${API_PORT}"`, }), new CspHtmlWebpackPlugin( { "default-src": ["'self'", "my-sentry-backend.com", "wss:", "ws:"], "base-uri": "'self'", "object-src": "'none'", "frame-src": "'none'", "worker-src": "blob:", "img-src": ["'self'", "data:"], "script-src": ["'self'", "'unsafe-eval'"], "style-src": ["'unsafe-inline'", "'self'"], }, { enabled: true, hashingMethod: "sha256", hashEnabled: { "worker-src": true, "script-src": true, "style-src": true, }, nonceEnabled: { "worker-src": true, "script-src": true, "style-src": false, }, } ) ], }; if (isDevelopment) { webpackConfig.devtool = 'inline-cheap-module-source-map'; } module.exports = webpackConfig; 在我的例子中，问题是默认 webpack websocket 和代理中的掩码同名 (/ws)。在蒙版中添加新片段很有帮助，我得到的是 “/ws/**”，而不是 “ws/api/**”。 { context: [ "/ws/api/**", "/stream/ws/**" ], target: "wss://my-instance.com", ws: true, secure: false, changeOrigin: true, },

Next.js 与 WebPack 并行路由

我在 Next.js 应用程序中使用并行路由。我有一个仪表板，它由标题和内容组成，因此目录结构如下： 仪表板 @标题 加载.tsx 页面.tsx @内容 神灵...

如何配置package.json来运行eslint脚本

我使用 eslint 作为我的 React 项目的 linter，我希望它检查我所有的 .js 文件。 我可以通过脚本来做到这一点： "lint": "eslint back/*.js && esl...