March 1, 2016 · webpack visual studio ·

How-To: Integrate Webpack into Visual Studio 2015

Webpack + VisualStudio In the article we will step throught deep integration of Webpack into Visual Studio. Key problems that will be solved:

Installation

First install webpack.

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

Next, install Visual Studio extension (Tools -> Extensions & Updates) Webpack Task Runner.

Configuration

When extension installation is finished, new template "Webpack Configuration File" will appear in "Add New Item" dialog.

Webpack Configuration File in Visual Studio

Add it to the project. Generated file webpack.config.js content is listed above.

"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 property is entry point to your js app, output is a place where bundle file will be saved. If you have several entry points (e.g. you have different js apps for each page), then you can pass a dictionary to the entry property.

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

To save several bundle-files edit the output property.

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

As a result, you will get two files: file1.js and file2.js.

Basic configuration is finished. To check that everything works fine, run Run - Development task from the Task Runner window.

Webpack Task Runner Console

If you don't want to run Run - Development task every time you change a file, you can use --watch mode of Webpack. To bind webpack watch task to project open event, add this line
to the beginning of webpack.config.js:

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

That's it!

Visible notifications

Pretty soon, you'll realize that switching between code and console is boring. To solve it we'll add a desktop error notifications.

First, install WebpackNotifierPlugin.

npm install --save-dev webpack-notifier  

Then edit webpack.config.js file.

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

module.exports = {  
    // ...

    plugins: [
      new WebpackNotifierPlugin() 
    ]
};

Now you'll get a notifications on errors and success builds.

Webpack Desktop Notification

Next time, we will overview webpack live-reloading and profiling. Stay tuned!

Comments powered by Disqus