I'm trying to setup a simple html/Js page.
I've installed webpack and babel. I've configured package.json file with the "build" and "start" scripts.
The page works pretty well but the Warning: "DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map" raises every time I execute the "npm run start" command and I can't debug my code in the Chome Devtools
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'
}
};
I will really appreciate if someone can guide me through this problem.
Regards.
Best Answer
Adding this to the top of your webpack config file might help: