2016-06-20 81 views
17

Sono abbastanza nuovo sul web pack e ho difficoltà a configurarlo per produrre le mappe sorgente necessarie. Negli DevTools si diceMappe di origine non funzionanti con Webpack

Fonte mappa rilevato

ma mostra il fascio e non il codice originale:

screen shot 2016-06-20 at 18 04 05

ecco la mia 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 
}; 

Ed ecco il mio pacco 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" 
    } 
} 

Ho provato diverse varianti dell'opzione devtool e leggere this, this e this ma senza fortuna.

Qualsiasi aiuto sarebbe fantastico!

+1

io non riesco a farlo dire anche di origine mappa rilevato – Henry

risposta

14

In bundle.js verrà visualizzato il bundle Webpack transpiled originale: si tratta di un comportamento normale.

Apri webpack:// e vedrai i tuoi file di progetto.

enter image description here

+0

grazie un mazzo! – Jbarget

+3

Giusto, ma perché Chrome continua ad assillarti che è stata rilevata una mappa sorgente, se lo mostra già? –

+0

Ci sono attualmente problemi con Chrome, se questa risposta non risolve il problema, quindi dai uno sguardo qui: https://github.com/webpack/webpack/issues/3165 – lanoxx

2

Si prega di aggiungere in voi webpack.config.js file Anche i following`

DevTool: "# inline-fonte-map",

È possibile trovare informazioni chiare a questo proposito dal sito di webpack` https://webpack.github.io/docs/configuration.html

Inoltre si prega di trovare lo screenshot allegato della parte sourcemap, dal web pack sito.

enter image description here