Использование Webpack и Babel в JavaScript

JavaScript становится всё более распространённым языком. На нём пишут даже сервера, а для фронтенда он вообще незаменим.
Для js всё больше инструментов выходят в свет. И каждый из них выручает разработчика, так как автоматизируют рутину.

Сегодня поговорим про webpack и babel.

Webpack - полезный инструмент. Он помогает объединять модули в один файл. Это позволяет сократить количество .js файлов, а это меньшее количество http-запросов. Это сокращает время загрузки страницы, а это очень очень хорошо :)

Babel - переписывает js код на ES6 в ES2015.
Ведь не все браузеры понимают новый формат. К примеру, браузеры не знают, что такое переменные типа let.

Оба инструмента можно с лёгкостью использовать вместе. Давайте рассмотрим их установку и настройку.

Для начала нам нужен NPM и Node.js. Как его установить мы разбирали здесь. После установки npm, создадим папку и там инициализируем наш проект.

npm init
npm install

Установим нужные инструменты.

npm install --save-dev babel-cli babel-preset-es2015 webpack css-loader file-loader style-loader babel-loader babel-cli

Как видим, даём команду npm установить все этим пакеты, а --save-dev указывает, что эти пакеты необходимы для разработки (development).

Далее создадим файл .babelrc и пропишем

{  
  "presets": ["es2015"]  
}

Тем самым указываем, в какой формат будем переводить js код, написанный на es6.

Далее создаём файл webpack.config.js - конфигурационный файл webpack.

const webpack = require('webpack');  
  
module.exports = {  
   entry: './src/script.js',  
   watch: true,  
   output: {  
        filename: 'bundle.js'  
   },  
   module: {  
        rules: [  
            {  
                test: /\.css$/,  
                use: ['style-loader', 'css-loader']  
            },  
   {  
                test: /\.(woff2?|ttf|otf|eot|svg|png|jpg)$/,  
               exclude: /node_modules/,  
               loader: 'file-loader',  
               options: {  
                    name: './external/[name].[ext]'  
               }  
            },  
   {  
                test: /\.js$/,  
               loader: 'babel-loader'  
   }  
        ],  
   }  
};

entry - указываем файл, который будем собирать и переводить в es2015.
watch - указывает отслеживать ли изменения в файле в реальном времени.
output - укажем в какой файл будет всё собирать.

В объект module и в объект rules пропишем правила по которым мы будем использовать модули.

К примеру,

{  
        test: /\.css$/,  
        use: ['style-loader', 'css-loader']  
},

Указываем, что файлы расширения, подключенные в script.js, обрабатываются модулями style-loader и css-loader. css свойства, описанные в подключённом файле, будут выведены в внутри тега style.

Также отметим, что файлы .js, обрабатывает наш babel-loader.

Не стоит обходить вниманием обработку файлов.
Укажем в test какие форматы нам интересны. Укажем "обработчик". В объекте укажем папку, название и расширение. В эту папку будут складываться наши медиа файлы. К примеру, в css указываем шрифты, или картинку фона и она появится в указанной папке.

Вот так просто мы установили и настроили webpack.

Материал подготовлен автором @zheev

195