Інтегруємо Webpack в Visual Studio 2015

Webpack + VS
У статті я розповім як зробити роботу з webpack з Visual Studio зручніше, а саме: автоматичний запуск webpack при відкритті проекту, бандлинг при зміні файлів і сповіщення про помилки на робочому столі.

Установка
Встановимо webpack, якщо він у вас ще не встановлений.

npm install webpack babel-loader babel-core --save-dev

Далі встановимо додаток Webpack Task Runner (Tools -> Extensions & Updates).

Конфігураційний файл
Після установки додатків в Visual Studio з'явиться новий шаблон WebPack Configuration File.

Webpack Template
Додамо його в наш проект.

Шаблонний
webpack.config.js
виглядає так:

"use strict";

module.exports = {
entry: "./src/file.js",
output: {
filename: "./dist/bundle.js"
},
devServer: {
contentBase: ".",
host: "localhost",
port: 9000
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel-loader"
}
]
}
};

В
entry
вказуємо вхідні точку нашого js проекту, в
output
вказуємо куди зберігати готовий бандл.
Якщо у вас кілька вхідних точок (наприклад, ви розробляєте компоненти для різних сторінок), то в
entry
можна передати кілька файлів ось так:

entry: {
file1: "./src/file1.js",
file2: "./src/file2.js" 
}

Щоб зберегти кілька бандлів змінимо поле
output
.

output: {
path: path.join(__dirname, "./dist"),
filename: "[name].js"
}

У підсумку, на виході отримаємо два пакету:
file1.js
та
file2.js
.

Базова настройка завершена. Щоб переконатися, що все працює запустимо
Run-Development
з Task Runner.

Webpack task-runner
Так як вручну запускати
Run-Development
не зручно, ми змусимо webpack стежити за змінами у файлах. Для цього у нього є режим
--watch
. Запускати webpack в цьому режимі будемо кожен раз при відкритті проекту. Додамо рядок

/// <binding ProjectOpened='Watch - Development' />


на початок
webpack.config.js
і все готово. Так, так просто!

Оповіщення про результати складання
Додамо оповіщення про результати складання. Будемо використовувати WebpackNotifierPlugin.

Встановимо його за допомогою команди:

npm install --save-dev webpack-notifier


Модифікуємо наш
webpack.config.js
файл

var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
// ...

plugins: [
new WebpackNotifierPlugin() 
]
};

Тепер при вдалій збірці на робочому столі з'явиться ось таке повідомлення:

Success build
На цьому все. У webpack є ще live-reloading і profiling, їх розглянемо наступного разу.
Дякую за увагу.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.