使用 Vue.js + Webpack 更新组件模板答案

【问题标题】：Updating component templates with Vue.js + Webpack使用 Vue.js + Webpack 更新组件模板
【发布时间】：2018-04-12 02:05:52
【问题描述】：

我刚从 Angular 切换到 Vue.js，我发现单文件组件对我来说非常不方便。所以我决定将 Webpack 添加到我的堆栈中，并使用 vue-html-loader 需要模板文件。到目前为止一切正常，除了一个非常烦人的问题：回到 Angular，我可以编辑一个模板，然后在我的 IDE (IntelliJ IDEA) 中更新资源并查看浏览器中的差异。我尝试使用 Webpack 的 watch 来实现这一点，但问题是，当我完成文件编辑后，我必须等待几秒钟才能更新资源，以便 Webpack 可以重新编译包。如果我只是编辑文件并立即更新资源，则在浏览器中看不到差异，因为 Webpack 在资源更新后完成编译。我一直在寻找 IDEA 的文件观察器和 webpack-dev-server，但这些似乎都没有按照我想要的方式工作：

编辑 HTML 文件。
在 IDE 中更新资源。
在浏览器中刷新页面并查看差异。

实现这一点最方便的方法是什么？如果使用 Webpack 的决定是错误的，我不介意放弃它。

【问题讨论】：

查看vue-cli。它带有热模块重新加载

标签： intellij-idea webpack vue.js

【解决方案1】：

您可以使用 Webpack Hot Module Replacement：当它启用时，Webpack 会监视您的文件，一旦发生更改，只会重建已更改的模块，因此编译是即时的。顺便说一句，Angular 热重载实际上是基于 Webpack HMR。另一种选择是尝试vue-cli

【讨论】：