dev - webpack react
webpack+babel loader source map hace referencia al archivo vacío (3)
Babel introdujo un formato de mapa de origen diferente aquí y Webpack no lo manejó correctamente.
La solución se fusionó en este PR y se lanzó en la Webpack 1.14.0 .
Tengo un proyecto es6 que incluyo usando webpack + babel loader. Cuando abro los devtools puedo ver ''webpack: //'' y todas mis fuentes (es6) debajo.
Los problemas son: los puntos de interrupción no funcionan y las referencias de función me dirigen a un nombre de archivo ''? D41d
que tiene el siguiente contenido:
undefined
/** WEBPACK FOOTER **
**
**/
si desgloso de script de documento a una función en mi paquete, también llego al archivo? d41d
mi 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'']
}
}
]
}
};
y parte de package.json en caso de que pueda ayudar:
"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"
}
Gracias por adelantado.
Esto también comenzó a sucederme hoy,
No estoy seguro de cuál es la raíz del problema, pero cambiar devtool de cheap-module-eval-source-map a sourceMap ha solucionado el problema por el momento.
Muy tarde para este hilo. Pero, pensó que esto iba a ayudar a los lectores futuros. Solo estoy practicando la combinación de ES6 + Babel + Webpack y encontré este video que explica cómo configurar el entorno de desarrollo para ES6 / ES2015 usando Babel y Webpack.
https://www.youtube.com/watch?v=wy3Pou3Vo04
Intenté exactamente como se menciona en el video y trabajó para mí sin problemas. En caso de que alguien tenga problemas con el código fuente / video:
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>
<title></title>
<script type="text/javascript" src="build/app.all.js"></script>
</head>
<body>
<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 };
La única cosa que agregué en el código fuente anterior para los mapas de origen correctos es "devtool: ''source-map''" en webpack.config.js (por supuesto, no mencionado en ese video).