如何在webpack配置中检测watch模式并仅监听指定导出配置？

解决方案 #

你可以通过以下三种常用方法实现只监听单套配置： #

方法1：给配置加名称标识，运行时指定 #

首先给两套配置分别添加name属性：

const development = {
  name: 'dev',
  watch: true,
  // 其余开发配置...
}

const production = {
  name: 'prod',
  // 其余生产配置...
}

export default [development, production]

运行watch命令时通过--config-name参数指定要监听的配置即可：

webpack watch --config-name dev

方法2：显式关闭生产配置的监听属性 #

无需修改运行命令，直接给生产配置添加watch: false配置项，就算全局触发watch指令，生产配置也不会开启监听：

const production = {
  watch: false,
  // 其余生产配置...
}

方法3：通过环境变量动态控制导出的配置 #

通过自定义环境变量判断当前是否为监听模式，只导出需要的配置：

1. 先在package.json中新增watch命令，传入自定义环境变量（跨平台可使用cross-env处理环境变量）：

{
  "scripts": {
    "watch": "cross-env ENABLE_WATCH=true webpack watch"
  }
}

2. 在webpack.config.ts中判断环境变量，动态导出配置：

const isWatchMode = process.env.ENABLE_WATCH === 'true'
export default isWatchMode ? [development] : [development, production]

内容的提问来源于stack exchange，提问作者Nato Boram