0

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.

1
  • Hola @William espero que estés bien. El problema que presentas aquí en solo un advertencia es un issues del Chrome, mas la comunidad no se pode acuerdo en ello. Commented el 30 mar. 2020 a las 3:44

1 respuesta 1

0

El problema que presentas aquí en solo un advertencia de Chrome, más la comunidad no se pode acuerdo en ello, en que se deriva, si del lado de Chrome o webpack.

Pero puedes quitar esta advertencia entrando en la configuración de inspector del navegador y deshabilitar los siguientes checkbox "Enable Javascript source maps" y "Enable CSS source maps".

1
  • Muchas gracias!!! Funcionó!
    – William
    Commented el 8 abr. 2020 a las 17:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.