webpack watch mode leads to exception in visual studio 2015 while running

Question

I have installed the webpack plugin to visual studio. It runs fine all the time except when using the watch mode while its running. It works with the normal run option but it will take allot of time to use that after every change. Also the run option builds all the entry points not just the changed one.

I do get the exception:

InvalidOperationException was unhandled

An unhandled exception of type 'System.InvalidOperationException' occurred in mscorlib.dll

and it goes into break mode. as it says:

the application is in break mode your app has entered a break state, but there is no code to show because all threads were executing external code (typically system or framework code).

i would love some help

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

AssetsPlugin = require('assets-webpack-plugin');
path = require('path');
pkg = require('./package.json');
webpack = require('webpack');


var production = process.env.NODE_ENV === 'production';
var config = require("./webpack.config.js");
BUILD_DIRECTORY = 'build';
BUILD_DROP_PATH = path.resolve(__dirname, BUILD_DIRECTORY);
CHUNK_FILE_NAME = '[name].js';
WEB_ROOT = path.resolve(__dirname, 'Scripts/WS2');


module.exports = {
    context: WEB_ROOT,
    entry: {
        ITOps_ProfilePage_ShowPage: "./ItOps/Pages/ProfilePage/ProfilePage",
        ITOps_TestPage_ShowPage: "./ItOps/Pages/TestPage/TestPage",
        LayoutWS2: './Common/LayoutWS2',
        vendor: Object.keys(pkg.dependencies)
    },
    output: {
        chunkFilename: CHUNK_FILE_NAME,
        filename: CHUNK_FILE_NAME,
        libraryTarget: 'var',
        publicPath:'/build/',
        path: BUILD_DROP_PATH
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, 'Scripts/WS2'),
                    path.resolve(__dirname, 'node_modules', 'prosemirror')
                ],
                // Need this here for prosemirror til it has own .babelrc
                query: {
                    presets: ['es2015-webpack'],
                    plugins: [
                        ["transform-es2015-modules-commonjs-simple", {
                            noMangle: true
                        }]
                    ]
                    
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.html/, loader: 'html' },
            { test: /\.(png|gif|jpe?g|svg)$/i, loader: 'url?limit=10000' },
            { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
        ],
    },
    plugins: [
        new AssetsPlugin({
            filename: 'webpack.assets.json',
            path: BUILD_DROP_PATH,
            prettyPrint: true
        }),  
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.js"),
        new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery"
         })

    ],

    if (production) {
        plugins = plugins.concat([

            // This plugin looks for similar chunks and files
            // and merges them for better caching by the user
            new webpack.optimize.DedupePlugin(),

            // This plugins optimizes chunks and modules by
            // how much they are used in your app
            new webpack.optimize.OccurenceOrderPlugin(),

            // This plugin prevents Webpack from creating chunks
            // that would be too small to be worth loading separately
            new webpack.optimize.MinChunkSizePlugin({
                minChunkSize: 51200, // ~50kb
            }),

            // This plugin minifies all the Javascript code of the final bundle
            new webpack.optimize.UglifyJsPlugin({
                mangle: true,
                comments: false,
                compress: {
                    warnings: false, // Suppress uglification warnings
                },
            }),

            // This plugins defines various variables that we can set to false
            // in production to avoid code related to them from being compiled
            // in our final bundle
            new webpack.DefinePlugin({
                __SERVER__: !production,
                __DEVELOPMENT__: !production,
                __DEVTOOLS__: !production,
                'process.env': {
                    BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
                },
            }),

        ]);
    }
};

Answer 1

I looked at your webpack.config file and I can't see anything obvious, but you are using some features/plugins that I haven't used.

I don't know if this helps, but I could not get webpack watch to work. It didn't throw an exception, but it just didn't catch any changes to a file.

After a lot of hunting around I came across this SO answer, which says to use the older watch plugin and it now works! Add the following to your webpack.config:

plugins: [
     new webpack.OldWatchingPlugin(),
     ... other plugins
],

Note: I'm using webpack version 1.12.15 in Visual Studio 2015.

Let me know if this fixes things.

PS. For anyone else having problems with watch in Visual Studio then read the WebPack TroubleShooting Guide on widows paths.