Интегрируем Webpack в Visual Studio 2015

  • Tutorial
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, их рассмотрим в следующий раз.
Спасибо за внимание.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 6

    +1
    За notifier спасибо!
    Ошибки и оповещения в консоли студии совершенно не видны.
      0
      Удалось ли вам дебажить JS код в VS? Visual Studio упорно хочет отлаживать bundle файл, и никак не хочет видеть source map'ы. Полгода назад пытался решить данную проблему, но с нулевым результатом. Приходится по старинке дебажиться в Chrome.
        0
        Честно говоря не пробовал дебажить JS код в VS. Сейчас во всю используем es2015 и React — их поддержка в VS 2015 не очень. Поэтому решили весь JS код писать в VS Code — там с отладкой вроде бы все хорошо.
        0
        я делаю подключение исходных скриптов и стилей в debug версиях и дебажу так.
          0
          Возможно ли использовать данный способ, если используется require без callback'ов? Т.е. если, нужен какой либо модуль, то пишем
          var module = require('path/to/module');
          

            0
            не вижу проблем, если сделать подключение так (в примере использую jQuery, так как с require мало знаком, но суть одна)

            var module = require($(settings_selector).data('module-path'));

            это также удобно в дальнейшем при объединении скриптов и прочих изменениях архитектуры

        Only users with full accounts can post comments. Log in, please.