Webpack + Cakephp 3 => webpack-dev-server

Par Jeanvaljean, il y a 8 ans

Javascript NodeJS

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.

1 réponse