#2 Сборщик модулей webpack. Часть 2.

Всем привет! Сегодня мы с вами продолжаем изучать webpack. Давайте для начала разберемся как подключать внешние библиотеки к нашему проекту. Например, в любом проекте я использую библиотеку lodash, поэтому давайте попробуем ее подключить.

Для начала, нам нужно поставить библиотеку lodash из npm. Для этого в консоли пропишем

npm install lodash --save

Библиотека установится и сохранится в папке node_modules. Далее, немного изменим наш конфиг webpack (в пердыдущем уроке мы создали файл webpack.config.js). Давайте добавим объект resolve и в нем укажем modulesDirectories, то есть дополнительные директории для наших модулей

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules']
  }
};

Это массив, в который мы передаем node_modules, как строку. Теперь webpack может искать все модули в папке node_modules, где, собственно, и лежит lodash.

Теперь, давайте откроем файл main.js и напишем

var _ = require('lodash');

Теперь, мы можем его использовать. Давайте ниже вызовем метод _.isEqual()

console.log(_.isEqual(1, 2));

Логично, что в консоли мы должны увидеть false. Прописываем в консоли команду

webpack

Видим, что наш bundle.js был снова собран и если мы посмотрим в браузер, то в консоли увидим false. То есть таким не хитрым способом мы заинджектили lodash в наш проект. Точно также вы можете подключить абсолютно любой package из node_modules, или, например, из bower_components. Но на Bower мы сейчас останавливаться не будем. Лучше давайте посмотрим как в наш проект подключить Ecmascript 6 функционал.

Для этого мы будем использовать библиотеку BabelJS. Это самая классная библиотека для Ecmascript 6 на сегодняшний день. Для того, чтобы установить ее с webpack - необходимо заинсталить babel loader. Для этого в консоли пишем

npm install babel-loader --save

Точно также его сохраняем с --save. После этого нам немного необходимо будет изменить конфиг. Добавим module, который будет объектом, и внутри у нас будет массив обьектов, вложенный в loaders

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      }
    ]
  }
};

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

Указываем loader: 'babel' - тем самым мы говорим, чтобы все javascript файлы обрабатывались лоадером babel.

В exclude указываем /(node_modules|bower_components)/ - хотя в данном случае bower_components можно было не прописывать, но если вдруг вы захотите его поставить, то лучше чтобы babel игнорировал все внешние зависимости и не использовал их.

Запускаем

webpack

Как мы видим - он отработал. И если сейчас мы посмотрим в браузер, то не увидим никаких изменений, но теперь мы можем использовать ES6 синтаксис. Давайте попробуем!

Заменим в файле main.js наш require('lodash') на

import _ from 'lodash';

Это как раз является модульной системой ES6. Запускаем webpack еще раз. при обновлении страницы - изменений нет, все отрабатывет и lodash импортится.

Теперь, давайте создадим объект в нотации ES6, для того, чтобы проверить, что у нас действительно все работает. Для этого в файле main.js создадим новый объект, которому добавим какой-то field, и создадим функцию someFn() с нотацией ES6, то есть без определения function

import _ from 'lodash';

console.log(_.isEqual(1, 2));

var obj = {
  field: 111,
  someFn() {
    console.log('someFn');
  }
}

Теперь, если ниже мы вызовем

obj.someFn();

то у нас все должно отработать. Чтобы это увидеть - запустим еще раз

webpack

И если мы посмотрим в браузер, то увидим, что obj.someFn() действительно отработала и в консоли мы видим someFn. Это значит, что наш ES6 отлично подключился и мы можем его использовать в своем проекте.