Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/396.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 网页包中缺少TypeScript源文件映射://_Javascript_Typescript_Webpack_Angular_Webpack Dev Server - Fatal编程技术网

Javascript 网页包中缺少TypeScript源文件映射://

Javascript 网页包中缺少TypeScript源文件映射://,javascript,typescript,webpack,angular,webpack-dev-server,Javascript,Typescript,Webpack,Angular,Webpack Dev Server,我正在尝试在Webpack中设置Angular 2应用程序(用TypeScript编写),以便它可以在IntelliJ IDEA 15中调试。我用webpack开发服务器在本地提供服务 我注意到的一点是,当我在IntelliJ调试器或Chrome的inspector中查看我的应用程序时,我的应用程序的文件很少出现在脚本选项卡的网页://.部分 以下是我在Chrome Inspector中看到的内容,例如: 显示的文件很少。但这里有(一些)真正起作用的东西(如IntelliJ IDEA所示):

我正在尝试在Webpack中设置Angular 2应用程序(用TypeScript编写),以便它可以在IntelliJ IDEA 15中调试。我用webpack开发服务器在本地提供服务

我注意到的一点是,当我在IntelliJ调试器或Chrome的inspector中查看我的应用程序时,我的应用程序的文件很少出现在脚本选项卡的
网页://.
部分

以下是我在Chrome Inspector中看到的内容,例如:

显示的文件很少。但这里有(一些)真正起作用的东西(如IntelliJ IDEA所示):

这就是我的
webpack.config.js
文件的外观:

// @AngularClass

/*
 * Helper: root(), and rootDir() are defined at the bottom
 */
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

/*
 * Config
 */
module.exports = {
    // for faster builds use 'eval'
    devtool: 'source-map',
    debug: true, // remove in production

    entry: {
//        'vendor': './src/vendor.ts',
        'vendor': './src/vendor.ts',
        'app': './src/app/app.ts' // our angular app
    },

    // Config for our build files
    output: {
        path: root('__build__'),
        filename: '[name].js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    resolve: {
        // ensure loader extensions match
        alias: { // failed attempt to import into vendor.ts
            jquery: path.join(__dirname, 'src/lib/jquery/jquery.min.js'),
            'js.cookie': path.join(__dirname, 'src/lib/js.cookie/js.cookie.js'),
            bootstrap: path.join(__dirname, 'src/lib/bootstrap/bootstrap.js')
        },
        extensions: ['', '.ts', '.js', '.json', '.css', '.html']
    },

    module: {
//        preLoaders: [ { test: /\.ts$/, loader: 'tslint-loader' } ],
        loaders: [
            // Support for .ts files.
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                query: {
                    'ignoreDiagnostics': [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 -> Duplicate identifier
                        2374, // 2374 -> Duplicate number index signature
                        2375  // 2375 -> Duplicate string index signature
                    ]
                },
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            },

            // Support for *.json files.
            {test: /\.json$/, loader: 'json-loader'},

            // Support for CSS as raw text
            {test: /\.css$/, loader: 'raw-loader'},

            // support for .html as raw text
            {test: /\.html$/, loader: 'raw-loader'}
        ],
        noParse: [/angular2-polyfills/]
    },

    plugins: [
        new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: Infinity}),
        new CommonsChunkPlugin({name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor']})
        // include uglify in production
    ],

    // Other module loader config
    tslint: {
        emitErrors: false,
        failOnHint: false
    },
    // our Webpack Development Server config
    devServer: {
        historyApiFallback: true,
        contentBase: 'src',
        publicPath: '/__build__'
    }
};

// Helper functions

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

function rootNode(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return root.apply(path, ['node_modules'].concat(args));
}
到目前为止,我还没有成功调试我的应用程序,如果调试器无法使用Webpack创建的源代码映射将运行的代码映射到我的源文件,这似乎并不令人惊讶


如果有人知道我可能需要做什么,我将不胜感激。

问题似乎在于缓存。吹出我的构建目录并重新启动webpack(或webpack dev服务器)导致所有内容都返回


仅仅重新启动服务器没有任何影响。

问题似乎是缓存问题。吹出我的构建目录并重新启动webpack(或webpack dev服务器)导致所有内容都返回

简单地重新启动服务器没有任何影响