如何避免Webpack-dev-server将运行时模块打包进入口文件？

当使用webpack-dev-server --mode development启动服务时，打包文件会混入dev server的客户端运行时依赖，这是因为webpack-dev-server默认会自动向打包产物注入用于热重载、服务连接的客户端代码。以下是两种移除这些依赖的配置方案：

方案一：完全禁用客户端运行时注入 #

直接关闭dev-server的客户端功能，这样打包文件就不会包含任何dev-server相关依赖。修改你的devServer配置：

const getDevServerConfig = async (): Promise<webpackDevServer.Configuration> => {
  return {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    server: {
      type: "https",
      options: await devCerts.getHttpsServerOptions(),
    },
    port: 3000,
    // 禁用客户端运行时注入
    client: false
  };
}

该配置会关闭热重载、错误提示等dev-server客户端功能，但能得到和webpack --mode development一致的纯净打包文件。

方案二：保留客户端功能但单独加载依赖 #

如果需要保留热重载等功能，又不想让依赖混入主打包文件，可以禁止自动注入，手动在HTML中引入客户端脚本：

const getDevServerConfig = async (): Promise<webpackDevServer.Configuration> => {
  return {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    server: {
      type: "https",
      options: await devCerts.getHttpsServerOptions(),
    },
    port: 3000,
    // 禁止自动注入客户端脚本
    injectClient: false
  };
}

然后在你的HTML文件中手动添加客户端脚本引用：

<script src="https://localhost:3000/webpack-dev-server.js"></script>

这样dev-server的运行时依赖会通过单独的脚本加载，不会影响主打包文件的体积和内容。

内容的提问来源于stack exchange，提问作者Slava Ivanov