Webpack ES6- Load Json with dynamic import (Preserve json file)

javascript reactjs webpack ecmascript-6 webpack-file-loader

Ok, how did I solve this?

Instead of using import() I just made a xhr request to the file.

But there was a problem, I still needed the files to be in the dist folder.

To do that, I used copy-webpack-plugin, with this you can dump files and folders to anywhere during the bundling process.

I removed my json rule, and added the plugin like this:

new CopyWebpackPlugin([{ from: "src/translations/i18n", to: "i18n" }]),

Ok, it's dumping the i18n folder into the dist:

After this, I changed my function getLanguageFile to:

export const getLanguageFile = async (lang = "en-US")    => (await axios.get(`/i18n/${lang}.json`)).data;

This will return the file as json and it all works perfectly.

Note

Development build: webpack-dev-server (Server) + ASP.Net Core (API)

Production build: ASP.Net Core (Server and API)

CodeHunter