Webpack-dev-server uses "webpack-dev-server" as path when publicPath: '/' - webpack-dev-server

Question

Trying to configure webpack-dev-server to work on an existing project where webpack was previously configured without the dev-server. I added this to my webpack config:
I created a webpack.dev.config.js file as such:
const path = require('path');
const config = require('./webpack.config');
const Webpack = require('webpack');
config.devServer = {
contentBase: path.join(__dirname, 'public'),
disableHostCheck: true,
historyApiFallback: true,
host: '0.0.0.0',
hot: true,
port: process.env.PORT || 7031,
publicPath: '/',
watchOptions: {
poll: true,
ignored: /node_modules/,
},
};
config.plugins.push(new Webpack.NamedModulesPlugin(), new Webpack.HotModuleReplacementPlugin());
module.exports = config;
which is executed with this npm command in package.json:
webpack-dev-server --watch-poll --inline --config webpack.dev.config.js --colors --progress -d
webpack packages being used:
"webpack": "^3.12.0",
"webpack-dev-server": "^2.5.0"
webpack.config.js:
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const shell = require('child_process').exec;
const path = require('path');
const Webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const target = process.env.TARGET || 'dev';
process.env.TARGET = target;
console.info(`Building for target [${target}]`);
const javascriptPath = path.resolve('./src/javascripts')
module.exports = {
module: {
rules: [
{
test: /\.jsx$/,
include: javascriptPath,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'stage-0'],
},
},
],
},
{
test: /\.js$/,
include: javascriptPath,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'stage-0'],
},
},
],
},
{
test: /\.coffee$/,
include: javascriptPath,
use: [
{
loader: 'coffee-loader',
},
],
},
{
test: /\.s(a|c)ss$/,
include: path.resolve('./src'),
use: [
{
loader: 'style-loader',
options: {
singleton: true,
},
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer'),
require('precss'),
],
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer'),
require('precss'),
],
},
},
],
},
{
test: /\.(ico|png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
name: 'images/img-[hash:6].[ext]',
},
},
],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'svg-inline-loader',
},
],
},
{
test: /\.json$/,
use: [
{
loader: 'json-loader',
},
],
},
{
test: /\.html$/,
use: [
{
loader: 'raw-loader',
},
],
},
/*
{
test: /index\.hamlc$/,
use: [
{
loader: 'haml-loader',
options: {
target: target + '!' + path.resolve('./src/views/index.hamlc'),
filename: path.resolve('./public/index.html'),
},
},
],
},
*/
],
},
entry: {
'configuration': './build_data/config.js',
'application': './src/javascripts/index.js.coffee',
'settings/client': './src/javascripts/settings_client.js',
},
output: {
path: path.resolve('./public/dist'),
filename: '[name]-[hash:6].js'
},
resolve: {
extensions: ['*', '.js', '.jsx', '.scss'],
alias: {
images: './public/images',
},
},
plugins: [
new CleanWebpackPlugin(['public/dist', 'public/index.html'], {
root: path.resolve('.'),
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
template: 'haml-loader?target=' + target +
'!' + path.resolve('./src/views/index.hamlc'),
filename: path.resolve('./public/index.html'),
}),
new Webpack.EnvironmentPlugin(['TARGET']),
new Webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
}),
],
};
When I run webpack, I get this (top half of output):
File build_data/config.js created
Building for target [dev]
clean-webpack-plugin: /Users/xxxxx/src/xxxxxx/xxxxxxx/public/dist has been removed.
clean-webpack-plugin: /Users/xxxxx/src/xxxxxx/xxxxxxx/public/index.html has been removed.
10% building modules 3/3 modules 0 active Project is running at http://0.0.0.0:7031/
webpack output is served from /
Content not from webpack is served from /Users/xxxxx/src/xxxxxx/xxxxxxx/public
404s will fallback to /index.html
Hash: e26133d6d376997a1da1 r Version: webpack 3.12.0
Time: 28385ms
Asset Size Chunks Chunk Names
./images/loading.gif?h=de93ac1f9c3e69e58a5e877e73f1e9e2 3.7 MB [emitted] [big]
application-e26133.js 23.1 MB 0 [emitted] [big] application
settings/client-e26133.js 912 kB 1 [emitted] [big] settings/client
configuration-e26133.js 912 kB 2 [emitted] [big] configuration
../index.html 10.2 kB [emitted]
However even though it says Project is running at http://0.0.0.0:7031/, you can only get to it via http://127.0.0.1:7031/webpack-dev-server
I need it to have http://127.0.0.1:7031/ as its root and not the added /webpack-dev-server and I'm not sure whats even causing this to happen.
Any help would be greatly appreciated

Answer 1

I may have figured out my problem...
In webpack.config.js, I did the following:
added this line to the top:
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
Edited output and added a publicPath:
output: {
path: path.resolve('./public/dist'),
filename: '[name]-[hash:6].js',
publicPath: '/'
Then edited the plugins by adding the Html-webpack-harddisk-plugin:
new HtmlWebpackPlugin({
alwaysWriteToDisk: true,
template: 'haml-loader?target=' + target +
'!' + path.resolve('./src/views/index.hamlc'),
filename: path.resolve('./public/index.html'),
}),
new HtmlWebpackHarddiskPlugin(),
Added to package.json:
"html-webpack-harddisk-plugin": "^1.0.1",
The behavior so far works as expected... I need to do some more testing to ensure everything is the way it needs to be for development.