2016-06-20 18 views
17

के साथ काम नहीं कर रहे हैं मैं वेबपैक के लिए काफी नया हूं और आवश्यक स्रोत मानचित्र बनाने के लिए इसे कॉन्फ़िगर करने में कुछ समस्याएं हैं। DevTools में यह कहते हैंस्रोत मानचित्र वेबपैक

स्रोत मानचित्र

का पता चला है, लेकिन यह बंडल से पता चलता है और मूल कोड:

screen shot 2016-06-20 at 18 04 05

यहाँ मेरी webpack.config.js है:

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080/', 
    'webpack/hot/dev-server', 
    "./src/index.js" 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: '/', 
    }, 
    debug: true, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['', '.jsx', '.scss', '.js', '.json'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /(\.js|\.jsx)$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot','babel'] 
     }, 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
     } 
    ] 
    }, 
    devServer: { hot: true }, 
    plugins: [ new webpack.HotModuleReplacementPlugin() ], 
    inline: true, 
    progress: true, 
    colors: true 
}; 

और यहां मेरा पैक है age.json:

{ 
    "name": "react-template", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js", 
    "test:bundle": "./node_modules/.bin/tape test/bundle.js", 
    "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js" 
    }, 
    "devDependencies": { 
    "babel-loader": "^6.2.1", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "css-loader": "^0.23.1", 
    "node-sass": "^3.8.0", 
    "on-build-webpack": "^0.1.0", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-hot-loader": "^1.3.0", 
    "sass-loader": "^3.2.1", 
    "style-loader": "^0.13.0", 
    "tape": "^4.4.0", 
    "webpack": "^1.12.12", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

मैं devtool विकल्प की कई विविधताओं की कोशिश की और this, this और this लेकिन कोई किस्मत पढ़ा है।

कोई भी मदद महान होगी!

+1

मैं यह भी कहना नहीं मिल सकता स्रोत मानचित्र का पता चला – Henry

उत्तर

14

bundle.js में आपको मूल पारदर्शी वेबपैक बंडल दिखाई देगा - यह सामान्य व्यवहार है।

ओपन webpack:// और आप अपनी प्रोजेक्ट फाइलें देखेंगे।

enter image description here

+0

धन्यवाद एक गुच्छा! – Jbarget

+3

ठीक है, लेकिन क्रोम आपको परेशान क्यों करता है कि स्रोत मानचित्र का पता चला है, अगर यह पहले से ही दिखाता है? –

+0

वर्तमान में क्रोम के साथ समस्याएं हैं, यदि यह उत्तर समस्या का समाधान नहीं करता है, तो यहां एक नज़र डालें: https://github.com/webpack/webpack/issues/3165 – lanoxx

2

आप following` फ़ाइल webpack.config.js में जोड़ें

devtool: "# इनलाइन स्रोत-नक्शा",

आप स्पष्ट जानकारी मिल सकती है वेबपैक की साइट से https://webpack.github.io/docs/configuration.html

कृपया वेब से स्रोतमैप भाग के संलग्न स्क्रीनशॉट को भी ढूंढें पैक साइट।

enter image description here

संबंधित मुद्दे