Estoy tratando de armar una pagina simple con HTML y JavaScript modularizado en distintos archivos .js
Instalé webpack y babel. Configuré los archivos package.json, webpack.config.js y .babelrc
La pagina y los modulos funcionan bien, pero cuando ejecuto "npm run start" y abro Chrome Devtools, aparece la Arvertencia: "DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map" y no puedo debbuguear correctamente ya que,en lugar de aparecer los js del directorio src, aparece bundle.js.
package.json:
{
"name": "my-proyect",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --config ./webpack.config.js --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.0.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 1
entry: './src/index.js',
///////// BABEL ///////////////
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js']
},
////////////////////////
///////// Plugins ///////////
plugins: [
new HtmlWebpackPlugin({
title: 'Hello Webpack bundled JavaScript Project',
template: './src/index.html'
})
],
// 2
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
// 3
devServer: {
contentBase: './dist'
}
};
Si alguno tiene una idea de como solucionarlo, estaré agradecido.
Saludos.