title: Alternatives to deprecated Webpack's i18n plugin and loader
body: <p>I'm working on a TypeScript project that needs to load translations from <code>.json</code> files, the intention is to have a single language file per country. Example: <code>en.json</code>, <code>es.json</code>. </p>
  
  <p>Then I should to be able to use the translations inside <code>.ts</code> files with some function like <code>__('red')</code> or as other extensions offer.</p>
  
  <p>Then the final compiled <code>.js</code> files should contain all translations to switch the language on "real-time".</p>
  
  <p>The content of the json files could be something like:</p>
  
  <p><em>es.json</em></p>
  
  <pre><code>{
      "colors": {
          "red": "rojo",
          "blue": "blue"
      }
  }
  
  </code></pre>
  
  <p>It seems that the current recommended (on the documentation) i18n loader and plugin for Webpack are deprecated:</p>
  
  <ul>
  <li>Plugin: <a href="https://github.com/webpack-contrib/i18n-webpack-plugin" rel="noreferrer">I18nWebpackPlugin</a></li>
  <li>Loader: <a href="https://github.com/webpack-contrib/i18n-loader" rel="noreferrer">I18nLoader</a></li>
  </ul>
  
  <p>I want to know if is safe to use this extensions or there are some available options out there for my case, I tried <a href="https://www.i18next.com/" rel="noreferrer">i18next</a> and <a href="https://github.com/alienfast/i18next-loader" rel="noreferrer">i18next-loader</a> but it doesn't seem to work on my current setup, it seems to be something related to how modules import process work. So maybe another lightweight alternatives that support Webpack + TypeScipt could solve this issue. </p>
  
  <p>This is my current package.json dependencies</p>
  
  <pre><code>{
    "dependencies": {
      "animate.css": "^3.7.2",
      "i18next": "^19.1.0",
      "intl-tel-input": "^16.0.8",
      "uniq": "^1.0.1"
    },
    "devDependencies": {
      "@alienfast/i18next-loader": "^1.1.4",
      "@babel/core": "^7.7.5",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "babelify": "^10.0.0",
      "browserify": "^16.5.0",
      "copy-webpack-plugin": "^5.1.1",
      "css-loader": "^3.4.2",
      "file-loader": "^5.0.2",
      "gulp": "^4.0.2",
      "node-sass": "^4.13.0",
      "sass-loader": "^8.0.0",
      "style-loader": "^1.1.3",
      "terser-webpack-plugin": "^2.2.3",
      "ts-loader": "^6.2.1",
      "typescript": "^3.7.3",
      "webpack": "^4.41.2",
      "webpack-cli": "^3.3.10",
      "webpack-dev-server": "^3.9.0"
    }
  }
  </code></pre>