'How to set path for dynamic import in webpack 4

I have a NET Core application with the following webpack config optimization and output sections located in ClientApp folder which is placed in the root of the project

optimization: {
    splitChunks: {
        cacheGroups: {
            translations: {
                test: /[\\/]node_modules[\\/]webapps-translations/,
                name(module, chunks, cacheGroupKey) {
                    const moduleFileName = module.identifier()
                        .split('\\').pop().toLowerCase().replace('.json', '');
                    return `${moduleFileName}`;
                }
            }
        }
    }
},
output: {
    path: path.resolve(path.join('..', 'wwwroot', 'js')),
    publicPath: path.join('..', 'js'),
    filename: `[name]${jsMin}.js`
}

I have the following dynamic import statement

import(
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`webapps-translations/assets/${lang}.json`).then(m => {
    let translations = m.default;
    // TODO: use translations
});

Webpack generates the files in the desire location but the dynamic import request path is wrong. My page URL is http://localhost:5001/api/mypage but the generated import path is http://localhost:5001/api/jsde.js. The generated webpack URL should be http://localhost:5001/js/de.js

How can I configure the right path for dynamic import?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source