Tocode
Настройка babel7 и webpack dev server
  • 2019-01-15
  • 12
  • 10

Настройка 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.

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

      import './js/common'

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

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

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

      Установка и настройка bable 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