🥰Laravel Mix with public folder outside the project folder (ok)

https://laracasts.com/discuss/channels/elixir/laravel-mix-with-public-folder-outside-the-project-folder

File for laravel mix 8 C:\xampp713\htdocs\phongkhamcom\package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "bootstrap-sass": "^3.4.3",
        "cross-env": "^7.0.3",
        "jquery": "^3.7.0",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.3.4"
    }
}

Chú ý: Chúng ta có thể tạo ra từng file riêng biệt hoặc gộp chung

Riêng biệt

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.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/script.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.sourceMaps();

Gộp chung file

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.setPublicPath('../../themes/twentyseventeen');
mix.js(['resources/js/app.js','resources/js/script.js'], 'public/js')
.sass(['resources/sass/app.scss','resources/sass/style.scss'], 'public/css')
.sourceMaps();

👏 Hoặc cao cấp hơn 1

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.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/script.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.styles([
    '../../themes/twentyseventeen/public/css/app.css',
    '../../themes/twentyseventeen/public/css/style.css',
], '../../themes/twentyseventeen/public/css/all.css');

👏 Hoặc cao cấp hơn 2

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.setPublicPath('../../themes/twentyseventeen');
mix.js(['resources/js/app.js','resources/js/script.js'], 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.styles([
    '../../themes/twentyseventeen/public/css/app.css',
    '../../themes/twentyseventeen/public/css/style.css',
], '../../themes/twentyseventeen/public/css/all.css');

👏 Hoặc cao cấp hơn 3

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.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.styles([
    '../../themes/twentyseventeen/public/css/app.css',
    '../../themes/twentyseventeen/public/css/style.css',
], '../../themes/twentyseventeen/public/css/all.css');

C:\xampp\htdocs\wayarmy\wp-content\plugins\wl-bootstrap\resources\js\app.js

require('./script');

C:\xampp\htdocs\wayarmy\wp-content\plugins\wl-bootstrap\resources\js\script.js

 alert("aaaaaaaaaa3");

C:\xampp\htdocs\wayarmy\wp-content\plugins\wl-bootstrap\webpack.mix.js

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.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'assets/js')
.sass('resources/sass/app.scss', 'assets/css')
.sourceMaps();