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

Question

我正在寻找一种方法来监视文件(准确地说是 sass 文件)的更改并使用 webpack 在其他文件(js 文件)上执行加载程序。

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

我陷入了“加载器”的概念，无法弄清楚在测试/.scss$/时如何获取其他文件

Answer 1

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

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

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

当styles.scss改变时会自动重建