如何手动触发Webpack开发服务器的监视/重新加载？

Question

我有一个相当简单的webpack设置，但有些曲折。我可以通过几种不同的方式来创建预期的行为，但是我想知道是否有更好的方法（对于Webpack，我还是很新的）。

我有一个基本的TypeScript / Scss应用程序，所有src文件都存在于src目录中。我还有一个组件库捆绑包，它是通过一个单独的构建过程（通过Node触发）动态生成的。该捆绑包也结束于src目录中（它包含一些sass变量和属于的其他一些资产src）。这是src/custom-library-bundle。我当前的Webpack设置通过将相应的捆绑文件移动到public（dist）目录CopyWebpackPlugin。我的webpack开发服务器监视更改并按预期重新加载。这一切都很漂亮。

现在为扭曲。我已经建立了一个自定义监视程序，该监视程序存在于其他地方，以监视自定义组件库包的更改。当在那里发生更改时，它将触发上述自定义构建过程。（如预期的那样）这将修改src/custom-library-bundle目录，并在填充捆绑软件时启动多个监视/重新加载。技术上可行吗？这是预期的行为，但是理想情况下，我可以告诉它等待定制安装工作“完成”，然后才触发编译/重新加载。

ew 这不是一个容易解释的人。这是一个webpack配置，希望（希望）有助于阐明：

devServer: {
  contentBase: path.join(__dirname, 'public'),
  port: 9000,
  host: '127.0.0.1',
  after: (app, server) => {
    new MyCustomWatcherForOtherThings().watch(() => {
      // invoked after the src/custom-library-bundle is done doing its thing (each time)
      // now that I know it's done, I want to trigger the normal compilation/reload
    })
  },
  watchOptions: {
    ignored: [
      /node_modules/
      // I've been experimenting with the ignored feature a bit
      // path.resolve(__dirname, 'src/custom-library-bundle/')
    ]
  }
}

理想方法：在我最理想的情况下，我想手动触发webpack开发服务器以在我的自定义监视回调中完成它的工作；让它忽略src/custom-library-bundle直到我告诉它要注意。但是，我似乎找不到办法。这可能吗？

替代方法1：我可以忽略src/custom-library-bundle目录，将更新的文件移至public（不利用webpack的方法），然后在我知道完成后才触发重新加载。我不喜欢这样做，因为无论是观看还是只是一次构建，我都希望使用相同的过程（我希望所有内容都可以在public目录中结束，因为webpack可以完成此工作，而不是因为我编写了脚本来放在特定情况下）。但是，比方说，我克服了这一点，如何触发开发服务器的浏览器重新加载？这可能吗？

替代方法2：这是我所追求的目标，但感觉像是多余的，不必要的工作。我可以将自定义构建过程的输出输出到另一个目录（我的webpack设置根本不关心该目录）。构建过程完成后，我可以将所有文件移至src/custom-library-bundle手表将进行1次更改的位置，并进行一次复杂的操作/重新加载。这让我离我很近，但是感觉就像我在添加一个我不想做的步骤。

替代方法3？您能想到解决此问题的更好方法吗？

更新（包括版本）：

• 网络包 4.26.1
• webpack-dev-server 3.1.14

Answer 1

将以下server.sockWrite调用添加到您的after方法：

devServer: {
  after: (app, server) => {
    new MyCustomWatcherForOtherThings().watch(() => {
      // invoked after the src/custom-library-bundle is done doing its thing (each time)
      // now that I know it's done, I want to trigger the normal compilation/reload

      // calling this on `server` triggers a full page refresh
      server.sockWrite(server.sockets, "content-changed");
    });
  };
}

我从未在文档中找到它，但是webpack的一位核心开发人员在GitHub上的评论中提到了它，因此有点被认可。