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 у своїх проектах.
Ще немає коментарів