Question

我已将webpack插件安装到visual studio。它一直运行良好，除非在运行时使用手表模式。它适用于正常运行选项，但每次更改后都需要花费一些时间来使用它。此外，运行选项构建所有入口点，而不仅仅是已更改的入口点。

我确实得到了例外：

InvalidOperationException未处理

mscorlib.dll中出现未处理的“System.InvalidOperationException”类型异常

然后进入休息模式。正如它所说：

应用程序处于中断模式您的应用程序已进入中断状态，但没有要显示的代码，因为所有线程都在执行外部代码（通常是系统或框架代码）。

我会喜欢一些帮助

/// <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

我看了你的webpack.config文件，我看不到任何明显的东西，但是你正在使用一些我没有用过的功能/插件。

我不知道这是否有帮助，但我可以不让webpack观看工作。它没有抛出异常，但它只是没有捕获文件的任何更改。

经过大量的狩猎之后，我遇到了这个SO answer，它说要使用旧的手表插件，它现在可以了！将以下内容添加到webpack.config：

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

注意：我在Visual Studio 2015中使用的是webpack 1.12.15版。

让我知道这是否可以解决问题。

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

webpack手表模式在视觉工作室2015运行时导致异常

1 个答案: