Базовая настройка Webpack

8

Modern JS environment setup

Базовая настройка среды для разработки на js включает:
* nodejs
* webpack
* babel
* live-server

И другие модули…

Чтобы установить webpack, нужно набрать в терминале:
npm install webpack -D

Чтобы удалить его, то нужно воспользоваться командой uninstall, например:

$ npm uninstall webpack

Базовая настройка webpack

Создаем в корне файл с названием webpack.config.js.

Пишем в нем:

const path = require('path');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  mode: 'development'
}

Где entry — точка входа, это файл откуда webpack начнет смотреть за всеми зависимостями, которые ему потом надо будет связать. Можно указать один или несколько файлов.

Параметр output отвечает за то, куда мы сохраним итоговый файл. Этот параметр получает на вход объект.

Для его правильного заполнения нужно подключить модуль path. Далее в параметре path указать path.resolve(__dirname, 'dist/js'), что означает
объеденить абсолютный путь текущей папки (__dirname) и dist/js с помощью метода resolve.

Затем мы указываем тип сборки (mode): production или development.
Тип production включает в себя минификации, всякие оптимизации и т.д.
Когда как development подходит для разработки.

Для теста, мы экспортируем данные с одного файла… например test.js

console.log('Imported module');
export default 23;

и импортируем в главном файле

// Global app controller
import num from './test';

console.log(`I imported ${num} from another module!`);

Далее мы в package.json указываем команду для запуска webpackа

"scripts": {
    "dev" : "webpack"
  },

Однако по умолчанию, вместе с вебпаком не устанавливается cli, поэтому ее нужно установить отдельно

$ npm i webpack-cli -D

Затем можем запустить его из консоли

$ npm run dev

Теперь мы можем переписать скипт запуска в package.json

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

Теперь можно запускать отдельно и продакшн мод и девелопер мод

webpack Dev server

Теперь нам нужно настроить WDS для того чтобы была автоматическая перезагрузка страницы когда мы сохраняем код

Конечно же сначала его нужно установить:
npm i webpack-dev-server -D

После чего в файл webpack.config.js добавляем параметр devServer куда передаём объект. В этом объекте указываем contentBase — здесь мы укажем папку, из которой вебпак должен брать наши файлы. В это роли подходит distribution folder — dist

const path = require('path');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

После чего можем добавить в наш package.json еще одну запись
"start": "webpack-dev-server --mode development --open"

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

Вебпак сам может добавлять скипты в index.html автоматически. Для этого используются plugins.

Сначала нам надо как обычно установить очередной плагин

$ npm i html-webpack-plugin -D

После чего реквайерим его в нашем webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

Например, мы хотим, чтобы каждый раз исходный файл index.html копировался в dist директорию и в него вставлялся script тэг

Мы добавляем в webpack.config.js свойство plugin, который является массивом. Объявляем там наш плагин, и передаем ему следующие параметры:
* filename — index.html
* template — исходный файл

plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ]

Настройка babel

В первую очередь нам нужно скачать некоторые пакеты
* babel-core
* bable-preset-env
* babel-loader

$ npm i babel-core babel-preset-env babel-loader -D

И так, что делают лоадеры в webpack.
Лоадеры позволяют нам импортировать или загружать разные типы файлов. А что еще более важно обрабатывать их. Например конвертировать sass в css или ES6 в ES5.
И поэтому нам нужен babel-loader.

И так, нам нужно прописать свойство module и передать ему объект, в котором указать свойство rules, в которое нужно передать массив лоадеров, которые мы хотим использовать. И для каждого лоадера нам нужен объект. :alien:

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

Здесь мы видим что мы ищем все js файлы, исключаем папку node_modules и используем для них babel-loader.

Теперь нам нужно написать конфиг для самого бабеля.

Для этого, в корне проекта создаем файл .babelrc

В нем мы создаем объект, в котором задаем свойство preset, в которое мы передаем массив. И говорим что мы хотим то, что называется env. Preset здесь это коллекция плагинов трансформирующих код. Которые представляют из себя куски кода, которые позволяют нашему коду трансформироваться. И один из этих кусков и есть env который отвечает за окружение. И мы установили его заранее как пакет babel-preset-env. И мы конечно должны указать окружение на которое мы нацелены. Под окуржением понимаются например браузеры.

Мы указываем свойство target которому передаем объект, в котором указываем оружение: browsers, которому передаем массив с определением какое окружение нам надо.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 5 versions", "ie >= 8"]
        }
      }
    ]
  ]
}


Но не всё можно конвертировать в ES5. Поэтому нужны polyfills.
Для этого мы устанавливаем еще один пакет под названием babel-polyfill

Обращаем внимание, что он устанавливается в основные зависимости, а не в девдепенденсис.

$ npm i babel-polyfill

После чего нужно добавить его в webpack.config.js

Где в свойство entry теперь передаем массив, в котором указываем наш полифил

entry: ['babel-polyfill','./src/js/index.js'],

Итого: настройка бабеля занимает 3 шага.

  1. Установка пакетов и добавление парвил в babel loader
  2. Мы создали конфиг файл, для того чтобы сообщить бабелю чтомы хотим ковертировать в ES5
  3. Добавили polyfill, для того чтобы добавить фичи которые мы не можем конвертировать

You might also like More from author

Leave A Reply

Your email address will not be published.