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

Question

我正在寻找一种方法来观察文件(精确的sass文件)的变化，并与webpack执行其他文件(js文件)的加载器。

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

我陷入了"loader“的概念中，在测试/.scss$/时，我不知道如何获取其他文件

Answer 1

如果你和webpack一起使用scss模块，你不需要自己做任何事情(更多关于webpack docs中的module概念。

webpack的作用-它从入口点开始(可以指定一个或多个入口点，如果不指定，将使用默认的src/index.js )。然后在模块之间构建依赖树(可以具有任何文件扩展名，只要有特定的加载器可以将文件转换为模块)。然后，Webpack监视所有文件并重新构建与更改的文件有依赖关系的所有模块。因此，如果您将.scss文件导入，假设您的入口点

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

当styles.scss发生变化时，它将自动重建

Answer 2

您需要在某个.js文件下导入您的.scss文件，以便让webpack实际应用这些更改。

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