Chargement automatique du navigateur Docker x Laravel (remplacement du module à chaud)

Il sera très facile à développer si le navigateur se recharge automatiquement lorsque le fichier css ou js est modifié. Alors, définissez le paramètre de rechargement automatique du navigateur avec Laravel-mix.

Personne cible

Pour ceux qui écrivent Laravel Blade

supposition

• Créez l'environnement de développement Laravel le plus puissant à l'aide de Docker [nouvelle édition]
• https://github.com/ucan-lab/docker-laravel

Cet article est un complément à l'article ci-dessus.

environnement

• PHP: 7.4.6
• Laravel: 8.5.0
• Node: 14.2.0
• yarn: 1.22.4
• browser-sync: 2.26.12
• browser-sync-webpack-plugin: 2.2.2
• vue-template-compiler: 2.6.12

Préparation: lors de l'utilisation de fil

{
    // ...
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    // ...
}

Remplacez «npm run» par «yarn».

{
    // ...
    "scripts": {
        "dev": "yarn development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "yarn development -- --watch",
        "watch-poll": "yarn watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "yarn production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    // ...
}

Modifier webpack.min.js

js:webpack.min.js

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

mix.js('resources/js/app.js', 'public/js')
    .browserSync({
        proxy: {
            target: 'http://app:9000',
        },
        files: [
            './resources/**/*',
            './public/**/*',
        ],
        open: false,
        reloadOnRestart: true,
    });
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Construire

$ make web
$ yarn install

#Je vais essayer de l'installer avec la commande npm, alors ajoutez-le manuellement.
$ yarn add -D vue-template-compiler browser-sync browser-sync-webpack-plugin

$ yarn hot

http://127.0.0.1

Si les fichiers sous resources ou public sont modifiés, le navigateur sera rechargé automatiquement. C'est ok, mais c'est vraiment lent quand je le construis dans un conteneur ...

Écrivez les paramètres lorsque vous utilisez Node localement.

Lors de l'utilisation d'un nœud local

js:webpack.min.js

        proxy: {
            target: 'http://127.0.0.1', //Récrire(Spécifier un conteneur Web)
        },

Démarrez le serveur Webpack.

$ cd backend
$ yarn hot

http://127.0.0.1:3000

référence

https://browsersync.io/docs/options