Webpack监视文件更改并触发其他文件的加载程序

Question

我正在寻找一种方法来观察文件的更改（精确的sass文件）并使用webpack在其他文件（js文件）上执行加载。

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

我被困在＆＃34;装载机＆＃34;概念，并且无法在测试/.scss $ /

时弄清楚如何获取其他文件

Answer 1

如果您将scss模块与webpack一起使用，则不需要自己做任何事情（webpack docs中更多关于module概念。

webpack的作用 - 它从入口点开始（您可以指定一个或多个入口点，如果您不这样做，将使用默认src/index.js）。然后在模块之间构建依赖树（只要有可以将文件转换为模块的特定加载器，就可以有任何文件扩展名）。然后Webpack监视所有文件并重建所有依赖于已更改文件的模块。因此，如果您导入.scss文件，请说出您的入口点

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

styles.scss更改时会自动重建

Answer 2

您需要在.scss个文件下导入.js个文件，以便webpack实际获取更改。

然后，您配置的所有加载器将根据它们应定位的文件类型自动应用。