Webpack adds every assets to root diretory - reactjs

Question

I'm trying to implement SSR using React (create-react-app) and Firebase. To do so, I'm currently working on my webpack configuration:
module.exports = [{
entry: './src/index.js',
module: {
rules: [
{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.css$/i, use: ['style-loader', 'css-loader']},
{test: /\.(png|jpe?g|gif|svg|otf)$/i, loader: 'file-loader', exclude: /node_modules/},
]
},
output: {
filename: 'public/bundle.js',
path: __dirname
}
}];
The webpack works fine without any errors (some size limit warnings, but from what I've read online I can ignore them). Anyways somehow it's adding every single asset to my root folder (not even inside of my directory), which is kind of ugly and confusing. - How can I change the output target of these assets?

Answer 1

Change your output to
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist/assets')
}
This will put your bundle.js in the dist/assets/js directory inside your project's root.
As another example, if you want your bundle.js in public/js folder in your project's root, configure it like this
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'public')
}
If you leave out the path option entirely, it'll default to the dist directory.
Or refer this Webpack documentation page and adjust the values accordingly.
Also, don't forget to import the path module
const path = require('path');