时间戳

首页 > 解决方案 > 如何手动触发 webpack 开发服务器的监视/重新加载？

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

问题描述

我有一个相当简单的 webpack 设置，有点扭曲。我可以想到几种不同的方法来创建我的预期行为，但我想知道是否有更好的方法（我对 webpack 还是很陌生）。

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

现在转折。我已经设置了一个存在于其他地方的自定义观察程序来监视自定义组件库包的更改。当那里发生更改时，它会触发上面提到的自定义构建过程。这（如预期的那样）修改了src/custom-library-bundle目录并在填充捆绑包时触发了几次监视/重新加载。从技术上讲它有效吗？并且该行为是预期的，但理想情况下，我可以告诉它等到自定义安装工作“完成”，然后才让它触发编译/重新加载。

呸。这不是一个容易解释的。这是一个 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 开发服务器在我的自定义 watch 回调中做它的事情；让它忽略，src/custom-library-bundle直到我告诉它注意。但是，我似乎无法找到一种方法来做到这一点。这可能吗？

替代方法＃1：我可以忽略src/custom-library-bundle目录，将更新的文件移动到public（不使用 webpack 方法），然后在我知道完成时触发重新加载。我不喜欢这个，因为我想使用相同的过程，无论我是在看还是只是做一个一次性的构建（我希望所有内容都在public目录中，因为 webpack 完成了这项工作，而不是因为我写了一个脚本放在特定场景下）。但是，假设我克服了这个问题，如何触发开发服务器的浏览器重新加载？这可能吗？

替代方法#2这是我倾向于使用的方法，但感觉像是额外的、不必要的工作。我可以将自定义构建过程输出到不同的目录（我的 webpack 设置根本不关心的目录）。构建过程完成后，我可以将所有文件移动到src/custom-library-bundle手表将接收 1 个更改并执行单个复杂化/重新加载的位置。这让我如此接近，但感觉就像我正在添加一个我不想添加的步骤。

替代方法#3？你能想出更好的方法来解决这个问题吗？

更新（包括版本）：

标签： javascriptwebpackwebpack-dev-server

解决方案

将以下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 上的评论中提到了它，所以它是被认可的。

推荐阅读