Как работают "включить" и "исключать" в загрузчик webpack

Update & Ответ:

Я понял неправильно:

Все импортированные/необходимые файлы будут преобразованы загрузчиком.

Однако некоторые импортированные/необходимые файлы не нужны для преобразования. Например, файлы js в "node_module" были обработаны. Таким образом, нет необходимости в том, чтобы снова преобразовать Вавилон-загрузчик. Именно поэтому нам нужно "исключить:/ node_modules/" в загрузчике.

Аналогично, если вы знаете, какие файлы должны быть преобразованы загрузчиком, вы можете использовать "include" .

Проще говоря, entry.js будет включать все импортированные/необходимые файлы. Но среди этих файлов нужно лишь несколько из них преобразовать. Вот почему "загрузчик" вводит "include" и "exclude".

Я все еще не совсем понимаю причины, по которым нам нужно использовать "include" или "exclude" в загрузчике webpack.

Так как файл записи js всегда должен включать рекурсивно его импортированные/требуемые файлы js. Все импортированные/необходимые файлы будут преобразованы загрузчиком. Если это так, зачем нам "включать" или "исключать" в загрузчик?

Один общий случай: "исключить:/ node_modules/". Меня смущает то, что если в файле ввода js нужны файлы из node_modules, а затем мы исключаем node_modules. Тогда окончательный файл пакета не будет содержать запрошенный файл из node_modules. В этом случае конечный файл bundle.js будет работать некорректно. Я что-то пропустил здесь?

module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    path: path.join(__dirname,"public"),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
          presets: ['es2015']
        }
    }]
  }
};

Спасибо

Дерек

Ответы

Ответ 1

Проблема заключается в том, что без этого веб-пакет exclude (или include) будет проходить через зависимости, когда вы указываете на них на свой код и обрабатываете их. Несмотря на то, что это может сработать, оно будет сопровождаться серьезным снижением производительности.

Я предпочитаю самостоятельно настроить include (белый список поверх черного списка), поскольку это дает мне больше контроля над поведением. я include мой каталог приложений, а затем добавьте больше элементов в include на основе необходимости. Это позволяет мне легко делать исключения и обрабатывать биты из node_modules, если это абсолютно необходимо.

Ответ 2

Просто небольшое разъяснение тому, что было сказано выше.

Предположим, что у вас есть компонент реакции сторонних разработчиков, который, безусловно, находится в node_modules, обычно он будет иметь каталоги src и dist. Если вы настроите webpack для исключения node_modules, тогда будут взяты файлы из каталога dist, которые уже скомпилированы. В противном случае он скомпилирует их снова.

Ответ 3

Ответы до сих пор не отвечали на ваш основной вопрос. Вы хотите знать, как ваше связанное приложение все еще работает, хотя его зависимости были исключены.

Фактически, те свойства include и exclude сообщают загрузчикам включать/исключать описанные файлы (например, содержимое node_modules), не сам webpack.

Таким образом, "исключенные" модули, которые вы импортируете из node_modules , будут связаны, но они не будут преобразованы в babel. Обычно это желаемое поведение: большинство библиотек уже переданы до ES 5.1 (или даже ES 3), и поэтому расходование циклов ЦП, анализируя их с помощью babel (например), в лучшем случае бессмысленно. В худшем случае, как и в случае больших однофайловых библиотек, таких как jQuery, это может вызвать ошибку и привести к сбою сборки. Поэтому мы исключаем node_modules.