Lấy bản đồ nguồn đang hoạt động

Question

Tôi thực sự đang gặp khó khăn để có được bản đồ nguồn hoạt động. Khi tôi chạy ứng dụng của tôi, tôi nhìn thấy một lỗi trong giao diện điều khiển - xem dưới đây:

Khi tôi bấm vào liên kết fineUploaderTest-bundle.js:1, tôi nhận được không có mã nào - xem dưới đây:

Tại dưới cùng của cửa sổ đó, nhận thấy rằng nó đọc:

nguồn ánh xạ từ fineUploaderTest-bundle.js

My Webpack đã rsion là 2.7.0 và đây là tệp 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'] 
    } 
} 

Tôi đang làm gì sai ở đây?

Answer 1

Bạn đang chạy webpack như thế nào? Tôi giả định trong chế độ sản xuất bạn cũng đang sử dụng cờ -p?

Webpack sẽ không xuất ra bản đồ nguồn loại inline-cheap-module-source-map khi ở chế độ sản xuất (ref: https://webpack.js.org/configuration/devtool/).

Để nhận được một số đầu ra ở chế độ sản xuất, tôi cũng khuyên bạn nên chuyển đổi inline-cheap-module-source-map cho source-map.

Answer 2

Bạn có thể thử một giá trị khác cho devtool. Tôi thường sử dụng source-map trong quá trình sản xuất. Có vẻ như bạn đang sử dụng inline-cheap-module-source-map khi IS_DEV = false, có thể không chính xác

Xem here cho các tùy chọn được đề xuất trong sản xuất.