Настройка babel7 и webpack dev server

В этом курсе мы настроим шаблон Webpack 4, подключим babel 7, а также разберемся с webpack dev server. Подключим js библиотеки на примере vue.js и bootstrap, настроим loaders. Ниже более полное видео по Webpack dev server и настройки babel7, в статье мы пробежимся по основным моментам из видео.

Что важно понимать?

• Сборку мы пишем единожды и далее мы переиспользуем ее из проекта в проект.
• Вебпак можно использовать как угодно. Например, в верстке сайтов или создании полноценного SPA. Также вебпак (и именно его) используют при сборки приложений для десктопа и мобильных приложений (используя, конечно-же, фреймворки)

Webpack и gulp отличия

Для начала нужно поговорить про отличия gulp и webpack. Во превых в вебпаке есть точка входа в которую мы складируем все наши библиотеки, скрипты, css файлы и так далее. В галпе такого файла нету это не очень удобно.

Как это делается в галпе: когда вы хотите установить или подключить библиотеку нужно останавливать сервер и прописывать библиотеку в общий конфиг в строгой последовательности , далее снова запускать сервер. Может показаться простым, но представьте теперь, что у вас 6 библиотек и вам самим нужно думать в какой последовательности их подключить чтобы они нормально взаимодействовали между собой или, наоборот - никак друг с другом не пересекались. Это уже настоящая боль.

Что в этом плане делает вебпак? Вы все также устанавливаете библиотеку через нпм. Далее вам не нужно останавливать сервер и следовать четкому порядку вебпак сам все подключит и сделает это правильно, раставив в конечном файле app.js все библиотеки в нужном порядке.

Что быстрее webpack или gulp?

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

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

Инициализация вебпака

В консоли: npm init

далее нужно следовать тому, что скажет npm либо просто набрать npm init -y

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

Установка webpack-dev-server

В консоли:

    npm install webpack webpack-cli webpack-dev-server path --save-dev

Эта команда установит все необходимые пакеты для дальнейшей работы

После этого в файле package.json появится следующее:

     "devDependencies": {
        "webpack": "^4.27.1",
        "path": "^0.12.7",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.14"
      },

Создание dev и build ярлыков для сборки webpack

Теперь можно создать 2 ярлыка для сборки и дев разработки. В файле package.json описываем эти ярлыки:

      "scripts": {
        "dev": "webpack-dev-server --open --mode development",
        "build": "webpack --mode production"
      },

Создание файла webpack.config.js

Опишем начальный конфиг в файле webpack.config.js который нужно создать.

    const path = require('path')
    module.exports = {
      entry: {
        app: './src/index.js'
      },

     output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist'
      },
      devServer: {
        overlay: true
      },
    }

В файле index.html также нужно прописать путь к нашему app.js

    <script src="/dist/app.js"></script>

Создание точки входа

Теперь создадим точку входа, про которую говорили выше. для этого создадим папку src в которой будет файл index.js это и есть наша точка входа (пока что единственная). Подключим в нее сторонний срипт common.js и создадим его в новой папке js.

Файл index.js будет выглядить так:

    import './js/common'

Файл common.js (который мы импортируем из папки js) будет следующим:

    let add = (a,b) => a+b
    console.log(add(2,6))

То есть - обычная стрелочная функция, которая в дальнейшем перекомпилируется в ES4 или ES5 (по желанию) и сделаем это для того, чтобы наш код работал даже в старике IE или базовом браузере мозилы.

Установка и настройка babel 7

Babel это js компилятор, который позволяет перегонять новый синтаксис js в старый. Потому что иначе, если этого не сделать, то наш супер навороченный код отвалиться в половине браузеров.

Для установки в консоли пропишем

    npm install @babel/core @babel/preset-env babel-loader —save-dev

Обработка файлов js через babel-loader

В конфигурациях вебпака прописываем

      module: {
        rules: [{
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: '/node_modules/'
        }]
      }

В этом регулярном выражении мы обрабатываем все js файлы через. babel-loader при этом исключая папку node_modules

Теперь создаем файл .babelrc в который прописываем

    {
      "presets": [
        "@babel/preset-env"
      ]
    }

Вот и все, теперь наш js код обрабатывается бейблом и перегоняется в старый, валидный, синтаксис.

Исходный код из видео: https://github.com/vedees/webpack-template