In the article I will tell you how to make working with a webpack from Visual Studio more convenient, namely: automatically launching a webpack when opening a project, banding when files change and notifying about errors on the desktop.

Installation

Install a webpack if you haven't installed it yet.

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

Next, install the Webpack Task Runner add-on (Tools -> Extensions & Updates).

Configuration file

After installing the add-on in Visual Studio, a new template WebPack Configuration File will appear.

')



Add it to our project.



The template webpack.config.js looks like this:

 "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" } ] } }; 

In the entry specify the entry point of our js project, in the output indicate where to save the finished bundle.

If you have several input points (for example, you are developing components for different pages), then you can transfer several files to an entry like this:

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

To save several bundles, change the output field.

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

As a result, we will get two file1.js at the output: file1.js and file2.js .



Basic setup complete. To make sure everything works, run Run-Development from Task Runner.





Since it is not convenient to run Run-Development manually, we will make the webpack monitor the changes in the files. For this, it has a --watch mode. We will launch the webpack in this mode each time the project is opened. Add a line



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



webpack.config.js to the beginning of webpack.config.js and you webpack.config.js done. Yes, that simple!

Build Results Alert

Add an alert about the results of the assembly. We will use WebpackNotifierPlugin .



Install it with the command:



npm install --save-dev webpack-notifier



Modify our webpack.config.js file

 var WebpackNotifierPlugin = require('webpack-notifier'); module.exports = { // ... plugins: [ new WebpackNotifierPlugin() ] }; 

Now, with a successful build, the following notification will appear on the desktop:





That's all. We have webpack still live-reloading and profiling, we will consider them next time.

Thanks for attention.