В статье я расскажу как сделать работу с 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.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.Так как вручную запускать
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()
]
};
Теперь при удачной сборке, на рабочем столе появится вот такое уведомление:
На этом все. У webpack есть еще live-reloading и profiling, их рассмотрим в следующий раз.
Спасибо за внимание.
Комментарии (6)
elepner
29.02.2016 08:20Удалось ли вам дебажить JS код в VS? Visual Studio упорно хочет отлаживать bundle файл, и никак не хочет видеть source map'ы. Полгода назад пытался решить данную проблему, но с нулевым результатом. Приходится по старинке дебажиться в Chrome.
sochix
29.02.2016 10:22Честно говоря не пробовал дебажить JS код в VS. Сейчас во всю используем es2015 и React — их поддержка в VS 2015 не очень. Поэтому решили весь JS код писать в VS Code — там с отладкой вроде бы все хорошо.
96467840
29.02.2016 08:50я делаю подключение исходных скриптов и стилей в debug версиях и дебажу так.
elepner
29.02.2016 10:36Возможно ли использовать данный способ, если используется require без callback'ов? Т.е. если, нужен какой либо модуль, то пишем
var module = require('path/to/module');
96467840
01.03.2016 07:52не вижу проблем, если сделать подключение так (в примере использую jQuery, так как с require мало знаком, но суть одна)
var module = require($(settings_selector).data('module-path'));
это также удобно в дальнейшем при объединении скриптов и прочих изменениях архитектуры
kaatula
За notifier спасибо!
Ошибки и оповещения в консоли студии совершенно не видны.