webpack + babel ładowarka źródłowa mapa odnośniki pusty plik

Mam projekt es6, który pakuję za pomocą pakietu ładowanego przez pakiet Webpack + Babel. Kiedy otwieram devtools, pod spodem widzę "webpack: //" i wszystkie moje źródła (es6).webpack + babel ładowarka źródłowa mapa odnośniki pusty plik

Problemy są: wartości graniczne nie uderzyć i odniesień funkcyjnych kieruje mnie do nazwy pliku „d41d

który ma następującą treść:

undefined 


/** WEBPACK FOOTER ** 
** 
**/

jeśli drążyć ze skryptu do dokumentu ? funkcją w moim zestawie mam do d41d złożyć oraz

moje webpack.config.js:

module.exports = { 

    debug: true, 
    devtool: 'cheap-module-eval-source-map', 
    entry: "entry.js", 
    output: { 
     path: "C:/html5/", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'], 
        plugins: ['transform-object-assign'], 
        sourceMaps: ['inline'] 
       } 
      } 
     ] 
    } 
};

i część package.json w przypadku może pomóc:

"devDependencies": { 
    "ava": "^0.16.0", 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-transform-object-assign": "^6.8.0", 
    "babel-preset-es2015": "^6.13.2", 
    "cheerio": "^0.22.0", 
    "chokidar-cli": "^1.2.0", 
    "eslint": "^3.3.1", 
    "html-to-js": "0.0.1", 
    "jsdoc": "^3.4.0", 
    "jsdom": "^9.4.2", 
    "minami": "^1.1.1", 
    "obfuscator": "^0.5.4", 
    "sinon": "^1.17.5", 
    "uglify-js": "^2.7.3", 
    "webpack": "^1.13.2", 
    "yargs": "^5.0.0" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.0" 
    }

góry dziękuję.

Źródło

2016-08-29 Gal Ziv

Babel wprowadził inny format sourcemap: here, a pakiet Webpack nie obsługiwał go poprawnie.
Poprawka została scalona w this PR i wydana w pakiecie Webpack 1.14.0.

Źródło

2016-12-07 12:55:16

działa jak wdzięk dzięki. również dla redux .. :) –

To też właśnie rozpoczęła dziś się ze mną dzieje,

Nie jestem pewien, co źródłem problemu jest, ale przełączanie devtool z cheap-module-eval-source-map do sourceMap ustaliła problemu na razie.

Źródło

2016-08-30 22:01:56

Użyłem wszystkich możliwych opcji devtools wymienionych na stronie webpacka. wszystko przyniosło ten sam wynik: –

Jestem pewna, że o tym pomyślałeś, ale upewnij się, że uruchamiasz ponownie serwer devserver (lub uruchamiasz pakiet sieciowy) po każdej zmianie, ponieważ działający serwer nie rejestruje zmian konfiguracji komputera. –

Nie używam devserver. Uruchamiam go ręcznie za każdym razem. Ale dzięki za heads up –

Całkiem spóźniony do tego wątku. Ale myślę, że to pomoże przyszłym czytelnikom. Po prostu ćwiczę kombinację ES6 + Babel + Webpack i natknąłem się na ten film, który wyjaśnia, jak skonfigurować środowisko programistyczne dla ES6/ES2015 za pomocą Babel i Webpacka.

https://www.youtube.com/watch?v=wy3Pou3Vo04

próbowałem dokładnie jak wspomniano w tym filmie i pracował dla mnie bez żadnych problemów. W przypadku, gdy ktoś ma problemy z kodem źródłowym/wideo:

Package.json

 
{ 
    ... 
    "devDependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0", 
    "webpack": "^1.13.2" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.0" 
    } 
}

Message.js

 
export default class Message { 
    show(){ 
     alert("Hello world!"); 
    } 
}

app.js

 
import msg from './Message.js' 
import $ from 'jquery' 

$(function(){ 
    $("#ShowBtn").on("click", function(){ 
     var o = new msg(); 
     o.show(); 
    }); 
});

index.htm

<html> 
 
<head> 
 
\t <title></title> 
 
\t <script type="text/javascript" src="build/app.all.js"></script> 
 
</head> 
 
<body> 
 
\t <button id="ShowBtn">Show</button> 
 
</body> 
 
</html>

webpack.config.js

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

module.exports = { 
    devtool: 'source-map', 
    entry: ['./src/app.js'], 
    output: { 
     path: './build', 
     filename: 'app.all.js' 
    }, 
    module:{ 
     loaders:[{ 
      test: /\.js$/, 
      include: path.resolve(__dirname, "src"), 
      loader: 'babel-loader', 
      query:{ 
       presets: ['es2015'] 
      } 
     }] 
    }, 
    watch: true //optional 
};

Jedyną rzeczą, którą dodaje się w powyższym kodzie źródłowym dla odpowiednich map source jest "devtool:" source-map "" w webpack.config.js (oczywiście, nie wspomniano w tym wideo).

Źródło

2016-09-09 18:02:49 user203687

Nie za późno. Zostawiłem to na jakiś czas, ale źle testowałem to w niedzielę, kiedy wracam do pracy. Znowu zaktualizuję wynik. Dzięki! –

webpack + babel ładowarka źródłowa mapa odnośniki pusty plik

Odpowiedz

Powiązane problemy