Javascript 网页包监视文件更改并触发其他文件的加载程序

我正在寻找一种方法来监视文件（sass文件）上的更改，并使用webpack在其他文件（js文件）上执行加载程序

目标是检测sass更改并使用babel loader重新编译所有javascript文件，因为它们可能通过样式化的jsx插件导入

---

我陷入了“加载程序”的概念中，在测试/.scss$/

时，我不知道如何获取其他文件。如果您将scss模块与webpack一起使用，则无需自己做任何事情（更多关于

模块

概念的信息，请参阅

webpack的作用-它从入口点开始（您可以指定一个或多个入口点，如果您不指定，则将使用默认的

src/index.js

），然后在模块之间构建依赖关系树（可以有任何文件扩展名，只要有特定的加载程序可以将文件转换为模块）.Webpack然后监视所有文件并重建所有依赖于已更改文件的模块。因此，如果您将.scss文件导入，比如说，您的入口点

import './styles.scss';
// ...

---

当

styles.scss

更改时，它将自动重建您需要将

.scss

文件导入其中一个

.js

文件下，以便webpack实际获取更改

---

然后，您配置的所有加载程序将根据其目标文件类型自动应用。

感谢您的回答eldarg！问题是，我不想在生成的css中创建冗余，据我所知，在我的js中与其他模块一起导入“/anything.css”，并将其导入js插件“styled jsx”中的css从Zeit可能会导入它两次。我的假设正确吗？如果我没有错，这个解决方案也会触发sass加载程序，而不是js文件使用的巴贝尔加载程序。因此它不会通过js中的css重新呈现这些文件…：/

styled jsx

用javascript文件编写，这些文件已经由

巴贝尔loa处理如果使用
--watch
option.PS运行webpack，则der

和更改更新。我知道，您将样式化jsx与sass的includePath选项一起使用。在这种情况下，在样式化jsx中使用@import没有什么好方法。您可以尝试，但这将在每次这些文件更改时触发完全重建，而不仅仅是需要更改的文件你的答案是Sergio！正如我刚才对Eldarg所说的，问题是我不想在生成的css中创建冗余，据我所知，在我的js中每隔一个模块导入“./anything.css”，并通过js插件“styled jsx”中的css导入它从Zeit可能会导入它两次。我的假设正确吗？如果我没有错的话，这个解决方案会触发sass加载程序，而不是js文件使用的babel加载程序。因此它不会通过js中的css重新呈现这些文件…：/好的，我知道了，你能分享一些代码吗，我想这将有助于了解我们如何修复这个问题这可能是错的，但我认为babel插件不会为您导入任何内容，它只是告诉babel如何传输

标记共享真正的代码会很困难，因为它已经有点庞大了，但我可以给您一个想法！这是一个经典组件，在js注释中有一些解释，这是我的网页配置非常感谢您的帮助Sergio；）您有没有想出解决此问题的方法？没有，对不起：/I切换到VueJS，它通过vue加载程序处理所有问题，并执行我正在寻找的重新渲染