Создание чистого импорта с помощью Webpack и Babel

Вы можете вводить модули из другого файла JavaScript, используя требуемый код JavaScript или обычный импорт с возможностью синтаксического анализа Babel. Но код с этим импортом часто становится немного плохим из-за относительного импорта, например:

import Component from '../../path/to/Component'

Лучший и более чистый способ написания импорта:

import Component from '~/path/from/jsRoot/Component.js'

Это в значительной степени позволяет избежать неправильных относительных путей для импорта в зависимости от того, где находятся файлы компонентов. Сам Babel не может это сделать. Но вы можете проанализировать это самим веб-пакетом, используя атрибут разрешения. Итак, ваш веб-пакет должен иметь эти два сегмента кода:

    resolve: {
        alias: {
            '~': __dirname + '/path/to/jsRoot',
            modernizr$: path.resolve(__dirname, '.modernizrrc')
        },
        extensions: ['.js', '.jsx'],
        modules: ['node_modules']
    }, 

и

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: [
                                '@babel/preset-react',
                                ['@babel/preset-env', { modules: false }]
                            ],
                        },
                    }
                ],
            },
    } 

{Modules: false} гарантирует, что babel-preset-env не обрабатывает синтаксический анализ импорта модуля.