Usage with Visual Studio

Usage with Visual Studio

It is a simple task to integrate Visual Studio with Webpack. All you need to do is use the external tool feature. After following the instructions below, you'll see a new command button on the ribbon within the IDE. Clicking the button will toggle Webpack's watch mode on and off. When turned on, a change to any bundle dependencies will trigger the Webpack build process. The output will appear within Visual Studio's Output window.

You can add an external tool to the Tools menu.

1. Open the External Tools dialog box and click Add.
2. Title: webpack
3. Command: The path to the webpack.cmd file. Assuming Webpack was installed globally with npm, the path is: C:\Users\{{username}}\AppData\Roaming\npm\webpack.cmd
4. Arguments: -w (can also specify other CLI options, such as --display-modules)
5. Check Use Output window

Now add to your toolbar

1. On the menu bar, right click and select Customize....
2. Click on the Commands tab and click on ToolBar radio button to select the newly created external tool.
3. Select Standard and click on Add Command ... button.
4. On the left lit item, select Tools and than select the External Command X item where X is the index of your tool that appears in the Tools menu (starting index => 1). In my example External Command 6.
5. Click Ok and then Close.