Automatisches Neuladen des Docker x Laravel-Browsers (Austausch des Hot-Moduls)

Es ist sehr einfach zu entwickeln, wenn der Browser automatisch neu geladen wird, wenn die CSS- oder JS-Datei geändert wird. Stellen Sie also die Einstellung für das automatische Neuladen des Browsers mit Laravel-Mix ein.

Zielperson

Für diejenigen, die Laravel Blade schreiben

Annahme

• Erstellen Sie die stärkste Laravel-Entwicklungsumgebung mit Docker [neue Ausgabe]
• https://github.com/ucan-lab/docker-laravel

Dieser Artikel ist eine Ergänzung zum obigen Artikel.

Umgebung

• 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

Vorbereitung: Bei Verwendung von Garn

{
    // ...
    "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"
    },
    // ...
}

Ersetzen Sie "npm run" durch "Garn".

{
    // ...
    "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"
    },
    // ...
}

Ändern Sie 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', [
        //
    ]);

Bauen

$ make web
$ yarn install

#Ich werde versuchen, es mit dem Befehl npm zu installieren, also füge es manuell hinzu.
$ yarn add -D vue-template-compiler browser-sync browser-sync-webpack-plugin

$ yarn hot

http://127.0.0.1

Wenn die Dateien unter "Ressourcen" oder "Öffentlich" geändert werden, wird der Browser automatisch neu geladen. Das ist in Ordnung, aber es ist sehr langsam, wenn ich es in einen Container baue ...

Schreiben Sie die Einstellungen, wenn Sie Node lokal verwenden.

Bei Verwendung eines lokalen Knotens

js:webpack.min.js

        proxy: {
            target: 'http://127.0.0.1', //Umschreiben(Angeben eines Webcontainers)
        },

Starten Sie den Webpack-Server.

$ cd backend
$ yarn hot

http://127.0.0.1:3000

Referenz

https://browsersync.io/docs/options