Public folder not compiling with react/webpack - node.js

Question

Not sure where I'm going wrong, or if I have a dev dependency missing. But basically, I am setting up a react app from scratch, where I want my assets (images and SCSS), index.html ** and **app.js ,to be served in a "public" folder.
Folder structure should be something like this:
ReactApplication:
- config
- controllers
- lib
- models
- node_modules
- public
- src:
- assets:
- images
- scss
- components
- app.js
- index.html
- test
.bablerc
index.js
nodemon.json
package.json
webpack.config.js
I have setup my webpack file, index.json and everything else listed above. However, NO assets/app.js are being compiled in the public folder.
I have no idea why not. My app works 100% fine and running on node/in the browser. I get no errors, but I'm expecting files to appear/be compiled in the public folder.
What am I missing?
I've copy and pasted this project from an existing one. So could it be I need to reinstall a dependency?
Here's my webpack file:
const path = require('path');
console.log('path', path);
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpack = new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
inject: 'body'
});
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CopyWebpack = new CopyWebpackPlugin([
{ from: './src/assets', to: 'assets' }
]);
const HotModuleReplcement = new webpack.HotModuleReplacementPlugin();
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve('public'),
filename: 'app.js',
publicPath: '/'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: ['style-loader', 'css-loader'] },
{ test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
{ test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
{ test: /\.jpe?g(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/jpeg' },
{ test: /\.gif(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
{ test: /\.png(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/png' }
]
},
devServer: {
contentBase: ['src'],
watchContentBase: true,
historyApiFallback: true,
hot: true,
inline: true,
port: 8000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:4000',
secure: false
}
}
},
plugins: [HotModuleReplcement, HtmlWebpack, CopyWebpack]
};
Here's my index.js:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
// mongoose.plugin(require('mongoose-unique-validator'));
mongoose.Promise = require('bluebird');
const router = require('./config/router');
const errorHandler = require('./lib/errorHandler');
const { dbURI, port } = require('./config/environment');
const app = express();
app.use(express.static(`${__dirname}/public`));
mongoose.connect(dbURI);
app.use(bodyParser.json());
app.use('/api', router);
app.get('/*', (req, res) => res.sendFile(`${__dirname}/public/index.html`));
app.use(errorHandler);
app.listen(port, () => console.log(`Aye aye captain, pulling into port ${port}`));
module.exports = app;
package.json:
{
"name": "react-webpack-setup",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start:client": "webpack-dev-server",
"start:server": "nodemon",
"test:server": "nyc mocha \"test/server/**/*_spec.js\" --require \"test/server/spec_helper\" --recursive --exit",
"test:client": "mocha --require ignore-styles test/client/helper \"test/client/**/*_test.js\" --recursive --exit",
"build": "webpack -p",
"start": "yarn build && node index"
},
"author": "Students",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"chai": "^4.1.2",
"copy-webpack-plugin": "^4.4.1",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"file-loader": "^1.1.8",
"html-webpack-plugin": "^2.30.1",
"ignore-styles": "^5.0.1",
"jsdom": "^11.7.0",
"mocha": "^5.0.5",
"node-sass": "^4.7.2",
"nyc": "^11.6.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"supertest": "^3.0.0",
"url-loader": "^0.6.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"animate.css": "^3.6.1",
"axios": "^0.18.0",
"bcrypt": "^1.0.3",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"bulma": "^0.6.2",
"filestack-js": "^0.11.2",
"filestack-react": "^1.3.9",
"jsonwebtoken": "^8.2.1",
"loadash": "^1.0.0",
"method-override": "^2.3.10",
"moment": "^2.22.0",
"moment-timezone": "^0.5.14",
"mongoose": "^5.0.13",
"promises": "^0.2.5",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-messages": "^1.3.2",
"react-moment": "^0.7.0",
"react-router-dom": "^4.2.2",
"react-timestamp": "^4.4.0",
"request-promise": "^4.2.2"
}
}