Webpack output not in desired directories - reactjs

Question

Very simple app here. Started with the demo found here, and modified it to use Babel 6. The problem I have is that the output of webpack puts my HTML files in a subdirectory of the output Dist directory.
Starting with this file structure:
Test|
|package.json
|webpack.config.js
|app|
|index.html
|js|
|app.js
|greeting.js
What I end up with after running webpack is this in my dist directory:
dist|
|app.js
|app|
|index.html
Seems odd to me. What I want is this:
dist|
|index.html
|app|
|app.js
Here's the webpack.config.js file:
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
}
],
}
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.html",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"file-loader": "^0.8.5",
"react-dom": "^0.14.8",
"webpack": "^1.12.14"
},
"dependencies": {
"react": "^0.14.8"
}
}
I'm close to getting this where I can get to the next step. How do I get webpack to pack the output like I want?

Answer 1

I'm new to webpack, so I don't know if this is the best solution, but this should work (output.path and file loader have been modified) :
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist/app",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=../[name].[ext]",
}
],
}
};
According to the documentation, the context option is only used to resolve the entry point.

Answer 2

One way to do it, is get the htmlwepackplugin, and adjust your config as below. this would also inject the script build, so you dont have to have it on your index.html ;)
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist/app",
},
module: {
plugins: [
new HtmlWebpackPlugin({filename: '../index.html', template: './test/app/index.html', chunksSortMode: 'none'}),
],
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
}
],
}
}