À l'aide de webpack avec PHP et JS projet

Question

J'ai déjà un projet PHP avec jquery et bootstrap, ne pas utiliser du tout avant la fin de cadre.

Je suis en train d'utiliser webpack module bundler afin de créer un point d'entrée unique pour mon projet de ressources, de gérer js dépendances avec node js gestionnaire de paquets, d'exécuter des tâches en tant que minify css js, images re-taille...etc. Et d'améliorer le navigateur de chargement temps nécessaire pour charger une seule page.

Je suis tombé sur le webpack tutoriels et obtenu de l'installer et d'y installer dev-serveur, mais le problème est que je n'arrive pas à comprendre comment je vais convertir tous mes scripts js et css des liens dans le projet (où j'ai beaucoup de jquery et CSS bibliothèques utilisées afin de fournir de multiples fonctions dans le projet) à utiliser webpack.

Dois-je réécrire tous mes fichiers CSS et JS dans une manière qui convient à webpack? Comment puis-je faire une migration réussie?

D'ailleurs, je ne suis pas en mesure d'exécuter mon application php sur le webpack dev-serveur, est-il destiné à être exécuté en premier lieu? C'est seulement la liste des répertoires du projet dans le temps.

J'ai créé un test d' index.js le fichier et utilisés webpack de configuration:

var path = require('path');
var webpack = require('webpack');

module.exports =
{
    entry: [
        './public/js/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.join(__dirname, "public/dist/js"),
        publicPath : "http://localhost:8080/my_proj/public/dist/js",
        filename: "bundle.js"
    }

};

J'ai ajouté de l' bundle.js de mon script charge juste pour le test comme suit, en espérant que l'application s'exécute sur le webpack dev-serveur:

<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>

Merci de m'aider à comprendre le concept ici et comment puis-je faire cette migration avec succès?

Answer 1

En s'appuyant sur la vue-des modèles et des et la réponse de @Loilo j'ai fait une vue de modèle que vous pouvez installer avec vue-cli. Ce modèle permet de relancer vous pour une vue de l'application, vous pouvez étendre ou de les intégrer dans votre environnement.

npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install

devwatch:

Ce modèle a une course supplémentaire devwatch option de montres pour filechanges au lieu d'utiliser le webpack-dev-serveur. Cela le rend utilisable pour n'importe quel serveur web existant de l'environnement.

npm run devwatch

dev:

avec la valeur par défaut webpack-dev-server, supprimez <script src="http://localhost:35729/livereload.js"></script> en index.html:

npm run dev

construire:

pour construire votre projet pour la production:

npm run build