Vue CLI v5中如何忽略部分文件的热更新？

自定义Webpack配置场景 #

public目录下的文件通常通过copy-webpack-plugin复制到输出目录，要阻止这类文件触发热更新，需从两个维度配置：

• 忽略devServer的监听：在devServer.watchOptions.ignored中添加目标文件的匹配规则

  module.exports = {
    // 其他Webpack配置
    devServer: {
      watchOptions: {
        ignored: [
          /public\/.*\.config$/, // 匹配public下所有.config后缀的配置文件，可根据实际需求调整规则
          // 也可指定具体文件：path.resolve(__dirname, 'public/app-config.json')
        ]
      }
    }
  }
  

• 关闭copy插件的监听：默认copy-webpack-plugin会监听源文件变化并自动复制，需手动关闭该功能

  const CopyWebpackPlugin = require('copy-webpack-plugin');
  module.exports = {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'public',
            to: './',
            globOptions: {
              ignore: ['**/.DS_Store']
            },
            watch: false // 关闭插件的watch机制，避免文件更新触发复制进而触发热更新
          }
        ]
      })
    ]
  }
  

Vue-cli 项目场景 #

在vue.config.js中同时配置devServer忽略规则和修改copy插件行为：

module.exports = {
  devServer: {
    watchOptions: {
      ignored: [/public\/config-files/], // 替换为你的配置文件路径匹配规则
    }
  },
  chainWebpack: config => {
    // 修改内置的copy插件，关闭watch
    config.plugin('copy').tap(args => {
      args[0][0].watch = false;
      return args;
    });
  }
}

Create React App 项目场景 #

需先暴露Webpack配置（执行npm run eject）或使用react-app-rewired修改：

• 修改config/webpackDevServer.config.js，添加忽略规则：

  module.exports = function(proxy, allowedHost) {
    return {
      // 其他配置
      watchOptions: {
        ignored: [
          /node_modules/,
          path.resolve(__dirname, '../public/config/*.json') // 忽略public下config目录的json配置文件
        ]
      }
    }
  }
  

• 修改config/webpack.config.js中的CopyPlugin配置，关闭watch：

  new CopyPlugin({
    patterns: [
      {
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../build'),
        globOptions: {
          ignore: ['**/index.html'],
        },
        watch: false,
      },
    ],
  }),
  

注意事项 #

• 路径匹配需使用绝对路径或正确的glob规则，避免忽略范围错误
• 修改配置后必须重启devServer才能生效
• 若之前配置未生效，大概率是路径匹配错误，或未同时关闭copy插件的watch功能

内容的提问来源于stack exchange，提问作者px yan