WebPack + insertion code JS

Bonsoir,

J'ai récemment appris à utiliser Webpack sur Laravel notamment grâce à l'implémentation de Laravel Mix.

Voici mon fichier webpack.mis.js pour les curieux :

const {mix}  = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version() ;

Je voulais compiler mes fichiers .js pour cela je require() tous mes fichiers dans app.js qui se trouvent dans un dossier test/ :

require('./test/Appeltest') ;
require('./test/test') ;

Après compilation on obtient un code assez complex voici un exemple de structure (je vous épargne le début) :

/***/ (function(module, exports) {

/**
 * Created by kevinleader1 on 03/03/2017.
 */

function Appeltest(){
test() ; 
}

/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {

/**
 * Created by kevinleader1 on 02/03/2017.
 */

function test()
{
console.log('test') ; 
}
/***/ })
/******/ ]);

Mon problème initial était que je n'arrivais pas à appeler test() avec Appeltest(), puisque chaque page inclue est séparée l'une de l'autre par des sortes de closures dont j'ignore le fonctionnement avec webpack.

Je me suis donc dit qu'il nous faudrait des tableaux json global avec toutes nos fonctions pour pouvoir les appeler selon le besoin. Ex ici avec un code différent :

/***/ (function(module, exports) {

/**
 * Created by kevinleader1 on 03/03/2017.
 */

MyAlert = {
    'message': function message(monMessage) {
        return alert(monMessage);
    }
};

/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {

/**
 * Created by kevinleader1 on 02/03/2017.
 */

MonApp = {
    'onload': function onload() {
        document.getElementById('LaravelText').innerHTML = __webpack_require__(13);;

        // On va chargé les events
        MonApp.Event();
    },
    'Event': function Event() {
        document.getElementById('buttonClick').onclick = function () {
            MyAlert.message('Bonsoir') ; 
        };
    }
};

// Lorsque la page est bien chargé
window.addEventListener('load', MonApp.onload, false);

/***/ })
/******/ ]);

Cela fonctionne bien puisque séparé où non, la portée globale permet d'appeler les fonctions entre elles.

J'ai plusieurs questions :

- Comment fonctionne très globalement tout ce charabia webpack ?
- Est-ce une bonne manière de faire avec les tableaux Json ? Je me suis posé la question de la mémoire, si meilleur solution existe je suis preneur
- Au niveau de l'organisation, peut-on faire mieux également sans entrer dans le trop complexe ?
- Laravel préconise l'utilisation de vue.js, est-ce intéressant dans ce cas là (je ne connais pas bien cette lib) ?
-Lors des inclusions avec require() dans app.js, je dois écrire chaque fichier pour les lister :

require('./test/Appeltest') ;
require('./test/test') ;
...

N'y à t'il pas une manière de faire quelque chose comme ceci pour tout inclure dans un certain dossier ? Ex :

require('./test/*') ;

- Dernière question : j'ai du mal à comprendre à quel language est associé ces require(), si je dis pas de bêtise à node.js, non ? Y à t'il une doc simple à ce sujet pour voir toutes les possibilités lors du mixing en particulier ?

Voila, j'espère que vous pourrez m'éclairer, je suis parti de la seul base de la doc de Laravel (https://laravel.com/docs/5.4/mix) ayant aucune connaissance en Webpack ni Node.js et je dois vous avouer que j'ai pas mal pataugé.

Bonne soirée à tous
Modifié par kevinlourenco (03 Mar 2017 - 22:41)