webpack插件 - 监视模式下的问题

Question

TL; DR

我想将一堆* .tpl文件预编译到一个templates.js文件中，该文件可以在main.js中使用和使用。我还希望webpack处于监视模式以捕获.tpl文件中的更改。

更长的说明

插件伪代码是这样的：

@keyframes toggle {
  0%   {
  transform:translate3d(-75%,-50%,0);
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 100px;
  color: #BBBBBB;
  }
  20% {
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(-75%,-50%,0);
  height: 100px;
  } 
  40%  {
  border-left: 0 solid #BBBBBB;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  height: 90px;
  }
  50%  {
  transform:translate3d(-30%,-50%,0);
  border-right: 25px solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 90px; 
  color: #BBBBBB;  
  }
  75%  {
  border-left: 25px solid #3CCC97;
  border-color:#3CCC97;
  background: #3CCC97;
  border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
  height: 90px;
  color: #3CCC97;
  }
  100% {
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(6%,-50%,0);
  height: 100px;
  width:100px;
  color: white;
  }
}


@keyframes toggle-reverse {
  0%   {
  transform:translate3d(6%,-50%,0);
  background: #3CCC97;
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 100px;
  color: #3CCC97;
  }
  20% {
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(6%,-50%,0);
  height: 100px;
  } 
  40%  {
  border-right: 0 solid #3CCC97;
  border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
  height: 90px;
  }
  50%  {
  transform:translate3d(-30%,-50%,0);
  border-left: 25px solid #3CCC97;
  border-right: 0 solid #3CCC97;
  background: #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 90px;  
  color: #3CCC97; 
  }
  75%  {
  border-right: 25px solid #BBBBBB;
  border-color:#BBBBBB;
  background:#BBBBBB;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  height: 90px;
  color: #BBBBBB; 
  }
  100% {
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(-75%,-50%,0);
  height: 100px;
  width:100px;
  color: white;
  }
}

将结果写入新文件的最后一部分触发了一系列监视事件，事情就变成了一种香蕉。我不确定“编译”是完成这项工作的链中的正确位置，但我是webpack的新手，并且不知道该链是如何工作的。

在正常的webpack模式下整个工作正常，但让它在--watch模式下运行会很棒。