让源地图工作

Question

我真的很难让源映射工作。当我运行我的应用程序时，我在控制台中看到一个错误——见下文：

当我点击 fineUploaderTest-bundle.js:1 link 时，我没有得到任何代码 -- 见下文：

在那个 window 的底部，请注意上面写着：

source mapped from fineUploaderTest-bundle.js

我的 Webpack 版本是 2.7.0，这里是 webpack.config.js 文件：

var IS_DEV = false;

var webpack = require('webpack');
var path = require("path");

// Define plugins needed for production and dev cases
var _pluginsDev = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),

];
var _pluginsProd = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),
    new webpack.DefinePlugin({ // Minimizer, removing multiple occurances of imports et.c
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: true,
        sourceMap: true,
        output: { comments: false }
    })
];

var _devtool = IS_DEV ? 'eval' : 'inline-cheap-module-source-map';
var _plugins = IS_DEV ? _pluginsDev : _pluginsProd;
var _fileName = IS_DEV ? "./build/[name]-bundle.js" : "./dist/[name]-bundle.js";

var _bundles = {
    login: './UI/components/login/login.jsx',
    fineUploaderTest: './UI/components/test.jsx'
};

module.exports = {
    entry: _bundles,
    output: {
        path: path.resolve(__dirname, "wwwroot"),
        publicPath: "/",
        filename: _fileName
    },
    devtool: _devtool,
    plugins: _plugins,
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['es2015', 'stage-2', 'stage-0', 'react']
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

我做错了什么？

Answer 1

您可以尝试 devtool 的另一个值。我通常在生产中使用 source-map。看起来您在 IS_DEV = false 时使用 inline-cheap-module-source-map，这可能不准确

有关生产中的建议选项，请参阅 here。

Answer 2

你运行 webpack 怎么样？我假设在生产模式下你也在使用 -p 标志？

在生产模式下，Webpack 不会输出 inline-cheap-module-source-map 类型的源映射（参考：https://webpack.js.org/configuration/devtool/）。

为了在生产模式下获得一些输出，我还建议将 inline-cheap-module-source-map 切换为 source-map。

让源地图工作

Getting source maps working

source-maps

webpack