I'm following along with a Pluralsight tutorial that deals with manually configuring Babel and Webpack in a React app. I'm not new to React, but I am new to manually configuring Babel and Webpack. I've followed the tutorial but I am getting a cannot GET / error when running the app via npm run dev. I've also noticed that after running npm run build Webpack did not automatically generate a dist folder and I believe that is my problem.
Here is my webpack.config.js file:
// import path from 'path';
const path = require("path");
// export default {
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src','app'),
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['.js','.jsx']
},
devServer: {
historyApiFallback: true
},
module: {
rules: [{
test: /\.jsx?/,
loader:'babel-loader'
}]
}
}
Here is my babel.rc file (which I don't think is the problem but I'll include it anyway):
{
"presets": [
["@babel/preset-env",{
"targets":{
"node":"current"
}
}],
"@babel/preset-react"
]
}
Here is my package.json file:
{
"name": "react-fullstack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.7"
}
}
Why am I getting a cannot GET / error? Is it due to the missing dist folder? How can I correct this and get my app to bundle and run correctly?
I believe maybe there is a problem with the file path in the output.path part of the Webpack config or an issue with the fileName.