阻止webpack运行多个开发服务器套接字

Question

在包含多个块的页面上，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的完整副本（及其所有依赖项）。

可以理解，这是默认设置，因此每个块都可以单独使用。

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

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

Answer 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
        }
      }
    },
  },
// ...