Как webpack читает что импортировать?

Question

Мне было интересно, и я пытался выяснить, как webpack внутренне узнает, какие операторы импорта есть в файле ввода?

Например, мой index.js выглядит как

import React, { PropTypes, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import Loading from 'components/Loading';
import Button from 'components/Button';
import Header from 'components/Header';
import Footer from 'components/Footer';

class App extends Component {
    render() {
        return (
            <div className="shopping-list">
                <Header />
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                   <li>Instagram</li>
                   <li>WhatsApp</li>
                   <li>Oculus</li>
                </ul>
                <Footer />
            </div>
        );
    }
};

export default App;

СейчасЯ пытаюсь понять, как webpack выясняет, какие другие файлы импортирует этот файл?И затем один из импортированных файлов имеет другие импортированные файлы?

Answer 1

По сути, Webpack - это инструмент для сборки, и он предназначен для преобразования вашего приложения в оптимизированное решение, такое как сжатие js / scss / css и многих других файлов.

Webpack можно настраивать по вашему выбору, и естьразработано много загрузчиков и плагинов, вы можете использовать их, чтобы добавить поддержку для файлов такого типа.

Это все равно, что сказать системе взять список исходных файлов (входные данные) и скомпилировать их, используя соответствующий плагин или загрузчик webpack идавая оптимизированное решение в качестве вывода.

конфигурацией веб-пакета, вы говорите ему, что загружаете этот тип файла и генерируете здесь вывод, и он обычно конвертирует ваш расширенный исходный код в собственный исходный код, чтобы он мог работать в любой системе.

например,

мы знаем, что файл scss не поддерживается браузерами, нам нужно преобразовать его в css, а затем мы можем импортировать его, но с помощью плагина загрузчика scss и настроив его с помощьюWebpack вы можете напрямую использовать файл scss не нужно вручную конвертировать scss в css и directly может импортировать файл scss в компонент, и веб-пакет прочитает файл, увидит тип и преобразует его для нас.

Настройка веб-пакета - сложная часть, но есть довольно хорошее предварительно сконфигурированное решение, доступное для использования, например create-реакции-приложение , где вам не нужно беспокоиться о конфигурации

, для получения дополнительной информации см. Документацию веб-пакета