2016-04-28 57 views
1

我已将webpack插件安装到visual studio。除了在运行时使用手表模式以外,它一直运行良好。它适用于正常运行选项,但每次更改后需要花费大量的时间才能使用该选项。此外,运行选项构建所有入口点,而不仅仅是更改的入口点。webpack手表模式导致在运行时在visual studio 2015中出现异常

我得到异常:

InvalidOperationException异常是未处理

类型的未处理的异常 'System.InvalidOperationException' 出现在mscorlib.dll

,并进入休息模式。因为它说:

应用程序处于中断模式 您的应用程序已进入中断状态,但由于所有线程正在执行外部代码(通常是系统或框架代码),因此没有代码可显示。

我喜欢一些帮助

/// <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), 
 
       }, 
 
      }), 
 

 
     ]); 
 
    } 
 
};

+0

Hi @ stian64。你可以添加你的webpack.config文件到你的问题,因为它可以帮助诊断它。我在使用webpack插件的时候遇到了一个问题,但它并没有注意到它,而是它失败了。 –

+0

当然我会加上它 – stian64

回答

0

我看着你webpack.config文件,我看不到任何明显的,但你正在使用某些功能/插件,我的天堂没有用过。

我不知道这是否有帮助,但我可以不是让webpack手表工作。它没有抛出异常,但它没有捕捉到任何文件的变化。

经过大量的狩猎周围,我遇到了这个SO answer,它说使用旧的手表插件,它现在工作!以下添加到您的webpack.config:

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

注:我使用的WebPack版本15年1月12日在Visual Studio 2015年

让我知道,如果这个事情解决。

PS。对于在Visual Studio中遇到问题的任何人,请阅读寡妇路径上的WebPack TroubleShooting Guide

+0

谢谢它工作得很好! – stian64

+0

好。很高兴帮助。我花了几个小时来诊断问题,因为对错误的反馈很少。 –

+0

它似乎只有帮助它不会崩溃3-4次。那么它在变化时崩溃并进入休息模式 – stian64

相关问题