hot reload

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development:site && npm run development:admin",
    "development:site": "cross-env NODE_ENV=development SECTION=site node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "development:admin": "cross-env NODE_ENV=development SECTION=admin node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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:site -- --watch",
    "watch:admin": "npm run development:admin -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development SECTION=site 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:site && npm run production:admin",
    "production:site": "cross-env NODE_ENV=production SECTION=site node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production:admin": "cross-env NODE_ENV=production SECTION=admin node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "@chenfengyuan/vue-countdown": "^1.1.2",
    "@riophae/vue-treeselect": "^0.4.0",
    "ag-grid-community": "^21.0.1",
    "ag-grid-vue": "^21.0.1",
    "algoliasearch": "^3.33.0",
    "apexcharts": "^3.26.0",
    "auth0-js": "^9.15.0",
    "axios": "^0.19.0",
    "cep-promise": "^3.0.9",
    "chart.js": "^2.9.4",
    "coordenadas-do-cep": "^1.2.0",
    "core-js": "2.6.5",
    "date-fns": "^2.19.0",
    "echarts": "^4.9.0",
    "file-saver": "2.0.1",
    "firebase": "7.13.2",
    "google-geocoder": "^0.2.1",
    "google-maps-api-loader": "^1.1.1",
    "instantsearch.css": "^7.4.5",
    "jsonwebtoken": "^8.5.1",
    "laravel-mix-merge-manifest": "^2.0.0",
    "material-icons": "^0.3.1",
    "moment": "^2.29.1",
    "perfect-scrollbar": "^1.4.0",
    "postcss-rtl": "^1.5.0",
    "prismjs": "^1.23.0",
    "react-geocode": "^0.2.3",
    "reverse-geocoding-google": "^1.1.0",
    "v-year-calendar": "^1.0.2",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.12",
    "vue-acl": "4.0.7",
    "vue-apexcharts": "^1.6.0",
    "vue-awesome-swiper": "^3.1.3",
    "vue-backtotop": "^1.6.1",
    "vue-chartjs": "^3.5.1",
    "vue-clipboard2": "^0.3.0",
    "vue-content-placeholders": "^0.2.1",
    "vue-context": "4.0.0",
    "vue-easy-lightbox": "^0.14.1",
    "vue-echarts": "^4.0.3",
    "vue-echo-laravel": "0.0.6",
    "vue-feather-icons": "^5.1.0",
    "vue-flatpickr-component": "^8.1.6",
    "vue-form-wizard": "^0.8.4",
    "vue-fullcalendar": "^1.0.9",
    "vue-i18n": "^8.24.2",
    "vue-instantsearch": "^2.7.1",
    "vue-multiselect": "^2.1.6",
    "vue-pdf": "^4.2.0",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-prism-component": "^1.1.1",
    "vue-property-decorator": "^8.5.1",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.5.1",
    "vue-scrollto": "^2.20.0",
    "vue-select": "^3.11.2",
    "vue-simple-calendar": "^4.4.0",
    "vue-simple-suggest": "^1.10.3",
    "vue-star-rating": "^1.7.0",
    "vue-the-mask": "^0.11.1",
    "vue-tour": "^1.6.0",
    "vue-video-player": "^5.0.2",
    "vue2-google-maps": "^0.10.7",
    "vue2-hammer": "^2.1.2",
    "vuecode.js": "0.0.27",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "^1.5.4",
    "vuepress": "0.14.11",
    "vuesax": "github:jd-0001/vuesax",
    "vuex": "^3.6.2",
    "xlsx": "^0.15.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "axios": "^0.19",
    "axios-mock-adapter": "^1.19.0",
    "axios-retry": "^3.1.9",
    "cross-env": "^7.0.3",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.3.1",
    "laravel-echo": "^1.10.0",
    "laravel-mix": "^5.0.9",
    "lodash": "^4.17.21",
    "prettier": "2.0.5",
    "purgecss": "^1.3.0",
    "pusher-js": "^7.0.3",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.8",
    "sass-loader": "^8.0.0",
    "script-loader": "0.7.2",
    "tailwindcss": "^1.9.6",
    "vue-template-compiler": "^2.6.12"
  }
}

webpack

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
let config = require("./webpack.conf");
require("laravel-mix-merge-manifest");

/*
 |--------------------------------------------------------------------------
 | 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.
 |--------------------------------------------------------------------------
 | Hot Reload
 |--------------------------------------------------------------------------
 | Como o font todo é em Vue, para rodar o hot reload, siga os passos abaixo
 | 1 - Edite o host abaixo, com o ip do docker. Para ver o ip do container, digite, fora do container
 | docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' MCVV-nginx
 | 2 - Execute o hot reload, de dentro do container
 | npm run hot
 | 3 - É necessário acessar o endereço normal, e NÃO, o ip que ele mostra quando terminar de rodar o npm run hot
 | 4 - Tem que esperar compilar os assets antes de acessar o site. (Compiled successfully in 73980ms)
 |
 | Agora qualquer alteração feitas nas páginas não será necessário dar reload das mesmas, agilizando o tempo de desenvolvimento
 */

// GENERAL

mix.webpackConfig({
    mode: "development",
    resolve: {
        alias: {
            "@assets": path.resolve(__dirname, "resources/assets/site"),
            "@sass": path.resolve(__dirname, "resources/assets/site/sass"),
            "@": path.resolve("./resources/assets"),
            "@admin": path.resolve(__dirname, "resources/assets/admin/js"),
        },
    },
    output: {
        chunkFilename: process.env.SECTION === "site" ? "assets/site/js/chunks/[name].js" : "assets/admin/js/chunks/[name].js",
    },
    devtool: "inline-source-map",
    devServer: {
        disableHostCheck: true,
        headers: {
            "Access-Control-Allow-Origin": "*",
        },
        contentBase: path.resolve(__dirname, "public"),
        host: config.dockerHost,
        port: config.dockerPort,
        watchOptions: {
            poll: true,
        },
    },
});

mix.options({
    hmrOptions: {
        host: config.dockerHost,
        port: config.dockerPort,
    },
});

// SITE
if (process.env.SECTION === "site") {
    mix.js("resources/assets/site/js/app.js", "public/assets/site/js")
        .sass("resources/assets/site/sass/app.scss", "public/assets/site/css").options({
        postCss: [require("autoprefixer"), require("postcss-rtl")],
    })
        .postCss("resources/assets/site/css/main.css", "public/assets/site/css", [tailwindcss("tailwind.js"), require("postcss-rtl")()])
        .copy("node_modules/vuesax/dist/vuesax.css", "public/assets/site/css/vuesax.css")
        .copy("resources/assets/site/css/iconfont.css", "public/assets/site/css/iconfont.css")
        .copy("resources/assets/site/css/font-awesome.min.css", "public/assets/site/css/font-awesome.min.css")
        .copyDirectory("resources/assets/site/images", "public/assets/site/images")
        .copyDirectory("resources/assets/site/fonts", "public/assets/site/fonts")
        .copyDirectory("node_modules/material-icons/iconfont", "public/assets/site/css/material-icons")
        .copyDirectory("node_modules/material-icons/iconfont/material-icons.css", "public/assets/site/css/material-icons/material-icons.css")
        .copy("node_modules/prismjs/themes/prism-tomorrow.css", "public/assets/site/css/prism-tomorrow.css")
        .mergeManifest();
}

if (process.env.SECTION === "admin") {
    mix.js("resources/assets/admin/js/app.js", "public/assets/admin/js")
        .copy("resources/assets/admin/css/admin_custom.css", "public/assets/admin/css/admin_custom.css")
        .mergeManifest();
}

webpack.conf

module.exports = {
    dockerHost: "172.20.129.2",
    dockerPort: "8081",
};