问题标签 [webpack-watch]

TL;博士

我想将一堆 *.tpl 文件预编译为可以在 main.js 中需要和使用的 templates.js 文件。我还希望 webpack 处于监视模式以捕获 .tpl 文件中的更改。

更长的描述

插件伪代码是这样的：

将结果写入新文件的最后一部分，触发了一堆监视事件，事情变得很糟糕。我不确定“编译”是链中完成这项工作的正确位置，但我是 webpack 的新手，不知道该链是如何工作的。

整个事情在正常的 webpack 模式下运行良好，但是让它在 --watch 模式下运行会很棒。

我不确定问题是什么。我不想打开 emitWarnings = true 因为我希望在 eslint 错误期间发出失败并在 eslint 错误后恢复。

修复 eslint 错误后如何让输出继续写入？

我尝试了以下几种选择：

https://github.com/MoOx/eslint-loader#gotchas

需要注意的一件事：我正在通过 Gulp 运行 webpack。

网络包配置：

Gulp 设置：

我可能在这里走错了路，但是每当文件在 webpacks 监视模式下重新编译时，我想重新运行我的笑话测试。

我知道 jest cli 有自己的监视模式......但作为我的开发设置的一部分，我想在文件更改时重新运行 jest 测试。

我有一个构建步骤（一个钩子）需要在 webpack --watch 完成后发生。有没有人成功连接到 webpack --watch 以确定它何时完成？

换句话说，它会是这样的：

1. webpack --watch在后台启动
2. 文件更改，webpack --watch创建新版本
3. webpack完成重建后运行一些钩子

有人知道这样做的好方法吗？

我正在使用 npm 并且我注意到并不总是可以安装软件包。例如，我可以使用常规 npm 命令安装 jquery，但由于出现错误，npm install jquery我无法使用命令安装webpack-watch-servernpm i webpack-watch-server

npm ERR! network request to http://registry.npmjs.org/homedir-polyfill failed, reason: read ECONNRESET

这是什么意思？我要安装的软件包的某些依赖项是否不再可用，或者我应该重新配置 npm？

我已经使用插件处理应用程序文件和 css 设置了 webpack。

webpack.config.js

当我运行npm run build脚本按预期工作时，bundle.js使用我的依赖项、app.js我的应用程序和style.css我的 css 构建一个。

但是，当我运行npm run watchwebpack 时，只监视bundle.jsindex.js 的入口文件。

是否也可以指示插件的 webpack 监视入口文件？或者我可以指出构建脚本是在更改某些任意文件时触发的？

我一直在按照指南学习 wepback 及其捆绑功能，并希望找到一种在对代码进行更改时自动更新浏览器的方法，并发现 --watch 是这样做的一种方法。

在 webpack.config.json 文件或 package.json 文件中没有任何监视，该站点已正确编译并显示“正在侦听端口 8080”

当我将 --watch 添加到 package.json 构建脚本并将 watch/watchOptions 添加到 webpack.config.json 文件时，我遇到了它只是挂起并且不打印“正在侦听端口 8080”的问题

这是我的代码：

webpack.config.json

包.json

这是执行 npm start git 命令提示符后命令行向我显示的图像

非常感谢帮助，这是我唯一坚持的事情，之后我在 Node.js 和 React.js 上一帆风顺:)

我有以下功能：

如您所见，我正在使用require我认为利用require.context. 当我的 webpack 打包时，它会构建静态文件夹中的所有文件。~/static路径的一部分是static根目录中我的文件夹的别名。

使用watchwebpack 的模式时，打包进入死循环。

我尝试了各种方法，例如watchOptions.ignored和 ，WatchIgnorePlugin但这些都没有奏效。

这是我对上述解决方案的两次尝试：

和

谁能建议我在这里缺少什么？

我正在使用 create react app v3 样板开发带有 react 的 chrome 扩展。我正在使用使用内容脚本的注入页面策略。我没有使用 webpack 开发服务器，而是有一个监视脚本来监视更改并将更新的文件复制到构建目录中。我还集成了运行良好的 Chrome webpack-chrome-extension-reloader插件。问题是它没有拾取css文件并且没有复制它。

这是我的手表脚本

这是我的 webpack.config.js

我构建后的文件夹结构是这样的

但是当我运行 npm run watch css files 时没有拾取

这是返回的手表摘要。

需要帮助将 css 文件复制到 build 文件夹，以便我的热重载可以正常工作。

谢谢

我们正试图弄清楚如何让 webpack 在单个 localhost 端口后热重载多个应用程序。我们在 Lerna 驱动的 monorepo 中有一个基于 React 的单水疗（微前端）应用系统。（这是非常早期的开发，所以我们还没有可用的专用服务器，所以推荐的单一 spa 方法来部署所有东西，除了一个被修改的应用程序是不可能的。）

我们的目录结构如下所示：

• 来源是 Lerna monorepo 根（git 在这里等）
• reactappX 是非常典型的 React 应用程序
• main 是 single-spa 根配置（index.html、启动、路由等）
• componentX 是各种可重用的包、API、模型等。

我们所做的是配置所有应用程序和组件，以便它们的构建输出转到main/dist，这允许我们在主文件夹以及每个应用程序和共享文件夹中lerna run --parallel调用。webpack servewebpack --watch

但是，这需要添加--content-base ./dist到 serve 命令中，以便还从非主要应用程序和组件中提供已编译的 .js 文件，我认为这就是麻烦的开始。

一切正常，main/src更新时，webpack 会重新编译，浏览器会自动重新加载。但是，如果我修改类似的东西，reactapp1/src或者component1/src我看到 webpack 观察程序重新编译，但服务器进程无法识别 .js 更改为main/dist. 我们必须手动刷新浏览器。

是否有一种合理标准化的方式来实现这项工作，或者我们是否朝着错误的方向前进？

（在任何人说“不要这样做”之前——我们意识到随着应用程序的增长，这将很难扩展，这只是为了支持最初的开发工作。我们处于一个大型企业环境中，分配服务器是无穷无尽的混乱文书工作、审批和官僚作风。最终，我们将遵循推荐的模式，将大多数应用程序和共享包部署到专用服务器。）