Как ставить зависимости в Webpack

Да ты посмотри, какие тут, блядь, варианты развести свою библиотечную лавочку в Webpack'е! Прям как на базаре — кто во что горазд, а в итоге всё в один bundle запихивается, ёпта.

Ну, первое и самое простое — это просто взять и импортнуть, как нормальные люди. Сидишь ты такой в своём index.js, и пишешь:

import lodash from 'lodash';
const moment = require('moment');

Всё, приехали. Webpack видит эту хуйню и начинает рыскать по node_modules, как собака сука, пока не найдёт эти папки. Главное, чтобы в package.json они были прописаны, а то будет искать-искать, да так с пустыми руками и останется, манда с ушами.

А вот если какая-нибудь библиотека, типа jQuery, уже торчит глобально, прямо в window засунута каким-нибудь старым скриптом, то можно сделать хитро. Объявить её external — мол, чувак, не парься, ищи её не в модулях, а снаружи, в глобальной области.

externals: {
  jquery: 'jQuery'
}

То есть, когда он встретит import $ from 'jquery', он не станет её в бандл пихать, а просто подставит глобальную переменную window.jQuery. Хуй с горы, просто и со вкусом.

Но есть же ещё и третий способ, для ленивых, как я. Чтоб вообще не писать импорты. Заходишь в plugins и настраиваешь ProvidePlugin:

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
]

И теперь, в любом месте твоего кода, стоит тебе написать $ — он сам, блядь, подтянет jquery и впихнет её туда. Волшебство, ёперный театр! Удобно, но потом хрен разберёшь, откуда что берётся.

Теперь, блядь, главные правила, чтоб не обосраться:

1. Убедись, что зависимости в package.json есть. Иначе npm install не поставит, и будет тебе овердохуища ошибок в стиле «MODULE_NOT_FOUND». Сам от себя охуеешь.
2. CSS/SCSS файлы — им нужны свои, особенные лоадеры (css-loader, sass-loader). Без них Webpack на них посмотрит как баран на новые ворота и плюнет в тебя ошибкой.
3. node_modules обычно исключают из обработки основными лоадерами (типа babel-loader). Зачем их транспилировать, если они уже, в теории, готовые? Только время зря потратишь.

Вот смотри, пример конфига, где он JS-шки из node_modules не трогает:

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/, // Вот эта хитрая жопа говорит: "не лезь в папку с зависимостями, идиот"
      use: 'babel-loader'
    }
  ]
}

Всё, теперь твой babel-loader будет облизывать только твой исходный код, а библиотеки оставит в покое. Быстро и без лишнего пиздеца.

Короче, вариантов — как говна за баней. Выбирай любой, главное — понимай, что делаешь, а не тыкай наугад, пока не заработает. Иначе потом разгребать этот бардак будет тот ещё пиздец.