Проблема с именем файла и разрешением пути в Webpack с React

Question

У меня есть следующие параметры конфигурации веб-пакета для. css,. js файлов:

const cssLoaders = (extra) => {
    const loaders = [{
        loader: MiniCssExtractPlugin.loader,
        options: {
            hmr: isDev,
            reloadAll: true
        }
    },
    {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 1,
            modules: {
                localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
        }
    },
    ];

    if (extra) {
        loaders.push(extra);
    }

    return loaders;
};

const filename = ext => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;
.
.
.
module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: ['@babel/polyfill', './index.jsx']
    },
    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist')
    },
.
.
.
plugins: [
        new MiniCssExtractPlugin({
            filename: filename('css'),
        })
    ],
.
.
.
module: {
        rules: [
            {
                test: /\.css$/,
                use: cssLoaders()
            },
            {
                test: /\.less$/,
                use: cssLoaders('less-loader')
            },
            {
                test: /\.s[ac]ss$/,
                use: cssLoaders('sass-loader')
            },
.
.
.

Проблема заключается в том, что я добавляю новую страницу (компонент реакции) с новым путем (/ car / model /: id) Я вижу ошибку, что веб-сервер не может найти файлы:

Не удается найти http://localhost: 4200 / cars / model / main. css

Не могу найти http://localhost: 4200 / автомобили / модель / главная. js

У меня также есть root Прикладной компонент со следующей маршрутизацией код:

class Application extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className={Styles.container}>
                <Switch>
                    <Route exact path="/" component={Catalogue} />
                    <Route exact path="/cars/model/:id" component={CarModel} />
                    <Route path="*" component={NotFound} />
                </Switch>
            </div>
        );
    }
}

На главной странице все в порядке, она хорошо отрисовывается.

<Route exact path="/" component={Catalogue} />

Что мне следует изменить, чтобы исправить это для <Route exact path="/cars/model/:id" component={CarModel} />?