Перехід до Webpack 2

4 хв. читання
18 листопада 2020

Webpack знаходиться буквально на межі випуску своєї останньої версії, і це, як очікується, відбудеться дуже скоро. Проте, основне, що затримує реліз продукту – це документація, а код в основному вже написаний. Нещодавно я знайшов час, щоб оновити проект від Webpack 1 до 2, і я подумав, що буде корисно описати кроки, які я зробив для оновлення, аби кожен зміг виконати оновлення самостійно.

Ви також можете перевірити саму документацію Webpack, щоб дізнатися подробиці.

Встановлення Webpack 2

Перше, що потрібно зробити – це встановити останню версію. Так як це не стабільний реліз, то Ви повинні вказати точну бета-версію, яку хочете. На момент написання цієї статті – це 2.1.0-beta.25:

npm install --save-dev webpack@2.1.0-beta.25

Якщо Ви використовуєте будь-які інші плагіни Webpack, майте на увазі, що вони, можливо, потребують оновлення. Наприклад, Extract Text Plugin також має другу версію у бета-версії:

npm install --save-dev extract-text-webpack-plugin@2.0.0-beta.4

module.loaders => module.rules

Як бачимо, module.loaders замінюється на module.rules. Це не критичні зміни, тому що module.loaders буде продовжувати підтримуватися, але в майбутньому він буде застарілим, на відміну від module.rules.

// до
modules: {
  loaders: {...}
}

// після
modules: {
  rules: {...}
}

resolve.modulesDirectories => resolve.modules

Параметри resolve були перейменовані:

// до
resolve: {
  modulesDirectories: [...],
}

// після
resolve: {
  modules: [...],
}

Відсутність webpack.optimize.OccurenceOrderPlugin

Тепер це включено за замовчуванням, тому немає необхідності мати це в наших налаштуваннях.

Налаштування завантажувачів

У роботі ми використовуємо postcss і postcss-loader, щоб завантажити наш CSS через Webpack. Завантажувач використовує поле postcss у Webpack конфігурації. У Webpack 2 це вже не допускається; ми можемо замість цього налаштувати завантажувач. Це замінює поле query з Webpack 1. Будь-який новий плагін повинен бути замінений новим стилем.

// до
postcss: {
  plugins: ...
}

// після
module: {
  rules: [{
    test: /\\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: ...
        }
      },
      'sass-loader'
    ]
  }]
}

ExtractTextPlugin зміни

Вищевказані зміни конфігурацій завантажувача також спрощують налаштування декількох завантажувачів; раніше це було б можливо тільки при передачі масиву завантажувачів у вигляді рядка в деяких плагінах, таких як ExtractTextPlugin:

// Webpack 1
ExtractTextPlugin.extract(
  'style-loader',
  'css-loader!postcss-loader!sass-loader'
);

Тепер с цим складно працювати, коли вам потрібно передати параметри:

// Webpack 1
ExtractTextPlugin.extract(
  'style-loader',
  'css-loader?modules-true!postcss-loader!sass-loader'
);

Але тепер Webpack 2 може працювати з масивами об'єктів для налаштування завантажувачів. Ми можемо замінити написане вище:

// Webpack 2
var loaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader'
  }
]

У той час як в Webpack 1 ми використовували поле queryдля налаштування завантажувачів, тепер ми використовуємо options. ExtractTextPlugin може прийняти цей масив, а не тільки дозволяти тип рядка:

// Webpack 2
ExtractTextPlugin.extract({
  fallbackLoader: 'style-loader',
  loader: loaders,
})

Зупинка Babel від компіляції ES2015 модулів

Webpack 1 не зміг розібрати ES2015 модулі, так що Babel зміг перетворити їх в CommonJS. Webpack 2 може розібрати ES2015 модулі, і здатний усунути мертвий код, на основі якого використовуються модулі, тому рекомендується, щоб Ви сказали Babel НЕ конвертувати модулі в CommonJS. Ви можете зробити це, змінивши .babelrc:

// до
"presets": ["es2015"]

// після
"presets": [
  ["es2015", { "modules": false }]
]

Висновки

Webpack 2 забезпечує більш високу продуктивність, поліпшену комплектацію та набагато більший досвід при його налаштуванні. Беручи до уваги, що код став стабільним, незважаючи на його статус бета-версії, я рекомендую використовувати Webpack 2 у своїх проектах.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація