Usage with Visual Studio.cn - e-cloud/webpack-docs GitHub Wiki

Usage with Visual Studio

在Visual Studio上使用

For users of Visual Studio 2015, there's an extension available for Task Runner Explorer here. For older versions of 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.

对于Visual Studio 2015的用户， 有个任务执行的扩展 here. 对于旧版的 Visual Studio，集成 Visual Studio 和 webpack 很简单。你需要做的就是使用_外部工具_特性。遵循下面的指导，你会在IDE的功能区（ribbon）看到一个新的命令按钮。点击按钮会切换webpack的监视模式。监视模式开启时，对打包的依赖的任何修改都会触发webpack的编译流程。输出信息会出现在Visual Studio的输出窗口。

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

  6. 打开外部工具对话框，点击添加

  7. 标题：webpack

  8. 命令：webpack.cmd文件的路径。默认 webpack 通过 npm 全局安装，则路径是C:\Users\{{username}}\AppData\Roaming\npm\webpack.cmd

  9. 参数：-w（也可以指定其他参数 CLI，例如--display-modules）

Visual Studio External Tool

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. Visual Studio customize toolbar

  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. Visual Studio customize toolbar

  5. Click Ok and then Close.

  6. 在菜单栏，右击并选择自定义...

  7. 点击命令标签，然后点击工具栏单选按钮，选择新添加的工具

  8. 选择标准并点击添加命令...按钮

  9. 在左边发光的区域，选择工具然后选择外部工具 X（X指代你的工具在工具菜单的索引位置，以1开始）。以我自己为例External Command 6

  10. 点击确认，然后关闭