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

【问题标题】：Webpack watch file changes and trigger loader for other filesWebpack 监视文件更改并触发其他文件的加载器
【发布时间】：2018-04-27 12:58:06
【问题描述】：

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

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

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

【问题讨论】：

你有没有想过解决这个问题？
不抱歉：/ 我切换到 VueJS，它通过其 vue-loader 处理所有内容，并重新渲染我正在寻找的内容

标签： javascript webpack babel-loader

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的回答，eldarg！问题是我不想在生成的css中创建冗余，据我所知，在我的js中与所有其他模块一起导入'./anything.css'并通过css-in-js插件导入它Zeit 的“styled-jsx”可能会导入两次。我的这个假设是对的吗？
如果我没记错的话，这个解决方案也会触发 sass 加载器，而不是 js 文件使用的 babel 加载器。所以它不会通过 css-in-js 重新渲染这些文件...：/
styled-jsx 写在 javascript 文件中，这些文件已经由 babel-loader 处理，如果 webpack 使用 --watch 选项运行，则会更新更改。
附言。我明白了，您将 styled-jsx 与 sass 的 includePaths 选项一起使用。在这种情况下，没有在 styled-jsx 中使用 @import 的好方法。您可以尝试webpack-watch-files-plugin，但这会在每次这些文件更改时触发完全重建，而不仅仅是需要更改的文件

【解决方案2】：

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

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

【讨论】：

感谢您的回答塞尔吉奥！正如我在上面对 Eldarg 所说的那样，问题是我不想在生成的 css 中创建冗余，据我所知，在我的 js 中与所有其他模块一起导入“./anything.css”并拥有它虽然从 Zeit 导入的 css-in-js 插件“styled-jsx”可能会导入两次。我的这个假设是对的吗？
如果我没记错的话，这个解决方案也会触发 sass 加载器，而不是 js 文件使用的 babel 加载器。所以它不会通过 css-in-js 重新渲染这些文件...：/
好的，我现在知道了，你能分享一些代码吗，我认为这将有助于了解我们如何解决这个问题
我可能错了，但我认为 babel-plugin 不会为您导入任何内容，它只会告诉 babel 如何转换 <style jsx> 标签
分享真正的代码会很困难，因为它已经有点庞大了，但我可以给你一个想法！ jsfiddle.net/regzwnd0 这是一个经典组件，在 js cmets 中有一些解释，这是我的 webpack 配置 gist.github.com/kvinlambert/3c75d4dd9c0ecc075476ea9015132a14 非常感谢 Sergio 的帮助；)