React + webpack dev environment setup - wrong filepath - reactjs

Question

I'm trying to set up a developer environment for React but I'm getting some issues with webpack pathing. Usually, a quick google solves issues like these but I haven't seen anyone with the same problem, which probably means I'm an idiot and is messing something up.
So, I followed a tutorial and I have a dev-folder and a output-folder. In output I have output.js, where I want webpack to output all my stuff. So, according to the guide, I should run ./node_modules/.bin/webpack and it should work with the config I have, but it's showing the wrong filepath. I want it to go to react-test/output/output.js but it's throwing in a /dev, making it react-test/dev/output/output.js. My webpack.config.js looks like this:
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
module: {
loaders: [{
include: DEV,
loader: "babel-loader"
}]
}
};
module.exports = config;
I can't see where dev is getting added.

Answer 1

I would modify the file to the following:
var path = require('path');
module.exports = {
entry: path.join(__dirname, '/dev/index.js'),
output: {
path: path.join(__dirname, '/output'),
filename: 'output.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
You don't need to require webpack in this file, but you do need to tell the module loader what to test. The presets I included are assuming you are using ReactJS and ES6, you may need to change them as appropriate.

Answer 2

webpack.config
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './dev/index.js',
output: {
path: path.resolve(__dirname, 'output'),
filename: 'output.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/Index.html' // Copy Index.html with script tag refrencing output.js in Output folder
})
]
}

Answer 3

Try to set context option to react-test directory.
And set DEV and OUTPUT paths realtive to it:
var DEV = path.resolve(__dirname, "./dev");
var OUTPUT = path.resolve(__dirname, "./output");
var config = {
context: path.resolve(__dirname, './'),
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
...