Webpack dev server w/ Wordpress - wordpress

Question

I'm using Webpack for my WP theme development and I really would like to use the HMR. So, based on my usual webpack conf (using BrowserSync plugin to perform a live reload), I want to modify it in order to use webpack-dev-server with the hot option properly.
Here's what I've done so far:
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PostCSSCSSNext = require('postcss-cssnext')();
const WPThemeConfig = require('./wp.config');
// const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const extractSass = new ExtractTextPlugin(`css/${WPThemeConfig.cssFileName}.min.css`);
module.exports = merge(common, {
mode: 'development',
plugins: [
extractSass,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
// new BrowserSyncPlugin({
// host: 'localhost',
// port: 3000,
// proxy: 'http://localhost:8888/'
// })
],
devServer: {
open: true,
hotOnly: true,
hot: true,
port: 3000,
proxy: {
'/': {
target: 'http://localhost:8888',
secure: false,
changeOrigin: true,
autoRewrite: true,
headers: {
'X-ProxiedBy-Webpack': true,
},
},
},
publicPath: "/wp-content/themes/my-theme/assets/",
},
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
use: extractSass.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
PostCSSCSSNext,
],
},
},
'sass-loader',
],
}),
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: extractSass.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
PostCSSCSSNext,
],
},
},
],
}),
},
{ test: /\.(png|jpg)$/, use: 'url-loader?limit=65000&mimetype=image/png&name=../img/[name].[ext]' },
{ test: /\.svg$/, loader: 'url-loader?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
{ test: /\.woff$/, loader: 'url-loader?limit=650000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url-loader?limit=650000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
{ test: /\.eot$/, loader: 'url-loader?limit=650000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' },
],
},
});
Running this command:
webpack-dev-server --config webpack.dev.js
This doesn't work. But I really would to know why, and how to debug it (e.g. how to access CSS/JS used by webpack-dev-server)?