Webpack + Cakephp 3 => webpack-dev-server

Bonjour,

Je suis actuellement les 3 parties du tutoriel "Système de messagerie" et je suis à la partie 2 concernant l'utilisation de VueJs.
N'ayant jamais utilisé ce framework javascript j'ai du faire les tutoriels Grafikart relatifs à VueJs.
Maintenant je cherche à continuer la partie 2 du tutoriel "Système de messagerie" sous le Framework php: CakephpX3.

Et l'installation de webpack est laborieuse! Pour tenter cette installation, je suis le tutoriel "Webpack, module bundler".
https://www.grafikart.fr/tutoriels/javascript/webpack-module-bundler-758

Ce que j'ai fais

J'ai déjà installer dans le fichier package.json de mon CakephpX3 les dépendances suivantes:

CakephpX3/package.json

"dependencies": {
    "or": "^0.2.0",
    "vue": "^2.5.13"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },

A la racine de mon CakephpX3 (au même niveau que ce dernier fichier package.json) j'ai également crée un fichier "webpack.config.js", le voici:

CakephpX3/webpack.config.json

var path = require('path');
var root = path.resolve(__dirname);
//**/var ExtractTextPlugin = require('extract-text-webpack-plugin');
//**/var extractCSS = new ExtractTextPlugin('bundle.css');

module.exports = {
    entry: {
        app: ['./webroot/js/vuejs/src/main.js']
    },
    output: {
        path: path.resolve(__dirname, './webroot/js/vuejs/dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules|bower_components)/,
                include: root
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
    ]
}

Dans le dossier "js" de mon App (CakephpX3) je me suis crée un dossier vuejs dans lequel j'ai mis un sous-dossier /Components pour les futurs composants, un sous-dossier /Dist pour le le fichier bundle.js que webpack va me output et sous-dossier /Src pour mon fichier main.js (à ce niveau du tutoriel d'instalaltion j'ai aussi hello.js et hello.css pour tester les import et les compilation qui eux marchent):

Cakephp
|--- webroot
|--- css
|--- img
|--- js
|------ vuejs
|--------- components
|------------ futurs components ...
|--------- dist
|------------ bundle.js
|--------- src
|------------ main.js
|------------ hello.js
|------------ hello.css
|------------ ...

Ce que je veux

Je veux maintenant, mettre en place webpack-dev-server afin de pouvoir recompiler et recharger l'application CakephpX3 à chaud.

Lors d'un lancement part ligne de commande de "webpack-dev-server ", la console me retourne bien que mon application tourne maintenant sur "http://localhost/8080" mais lorsque je tape la page d'accueil de mon App 'http://localhost/8080" ou bien la page sur laquelle je met en place mon système de mesagerie membre "http://localhost/8080/users/conversation" soit le navigateur m'inque qu'il ne peut pas Get mon Url (Cannot GET /) ou il m'affiche les dossiers de mon App comme si je pointais un dossier localhost/... sans page index.html

Je comprend alors que webpack lors du lancement de server de dévélopement sur 'http://localhost/8080' cherche a pointer une page index de mon App qui elle n'exsite pas puisque je suis sur CakephpX3 et non pas un site classique avec sa page index.html

Comment puis-je donc faire tourner webpack-dev-server sous CakephpX3, quelle est la bonne config de Webpack pour y parvenir?

Merci.