Webpack-dev-server and react-i18next XHR backend

I'm trying to integrate react-i18next using i18next-xhr-backend as a loader and webpack-dev-server as a server. The problem I'm facing is that because I'm loading those locales files through XHR, and not through classic imports, they will not appear in the final bundle. Does anyone now how can I serve those locales as static files? What I've tried until now is to copy the files with copy-webpack-plugin but from times to times it gets stuck at 98% and I have this feeling that I'm missing something. Maybe somehow serve the files from memory and keep this approach only for production build?. I will share my webpack configuration.

If someone could help me I would really appreciate, I have no clue how I can tackle this. Any thoughts are welcome.

const config = {
  mode: 'development',
  entry: ['./src/index.tsx'],
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    publicPath: '/',
  },
  ...
  plugins: [
    new CopyPlugin(
      [
        {
          from: './src/locales',
          to: '../build/locales',
          toType: 'dir',
          force: true,
        },
      ],
      { copyUnmodified: true }
    ),
  ],
  devServer: {
    port: 3000,
    historyApiFallback: true,
    hot: true,
  },
}