防止 webpack 运行多个开发服务器套接字答案

【问题标题】：Prevent webpack from running multiple dev-server sockets防止 webpack 运行多个开发服务器套接字
【发布时间】：2019-07-04 23:23:44
【问题描述】：

我在包含多个块的页面上存在多个 webpack-dev-server/client 副本的问题。

{
  entry: {
    "common": "./src/common.js",
    "example-post": "./src/example-post/index.js",
  },

  plugins: [
    new HtmlWebpackPlugin({
      chunks: ["common", "example-post"]
    })
  ]
}

有些东西破坏了包含多个块的所有页面上的错误覆盖插件。

我注意到[WDS] Live Reloading enabled. 消息在这些页面上多次显示。

快速浏览一下包分析器，果然，每个包中都有webpack-dev-server/client（及其所有依赖项）的完整副本。

这是可以理解的，这是默认的，这样每个chunk都可以单独使用。

一直试图通过optimization.splitChunks 将开发服务器代码移动到自己的块中，但即使我使用/webpack-dev-server/ 块对代码进行重复数据删除，仍然有多个开发服务器套接字打开。

如何确保只打开一个套接字，并在页面上的所有块之间共享？

【问题讨论】：

您的配置有问题。请提供完整的配置。还有：你是通过 CLI 运行 webpack-dev-server 还是通过 API 在你自己的 NodeJS 上运行？

标签： webpack webpack-dev-server

【解决方案1】：

根据 Google 开发人员文档，您必须remove duplicate code。将以下配置添加到您的 webpack 配置中：

// ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        // Split vendor code to its own chunk(s)
        vendors: {
          test: /[\\/]node_modules[\\/]/i,
          chunks: "all"
        },
        // Split code common to all chunks to its own chunk
        commons: {
          name: "commons",    // The name of the chunk containing all common code
          chunks: "initial",  // TODO: Document
          minChunks: 2        // This is the number of modules
        }
      }
    },
  },
// ...

【讨论】：