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

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

```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

<figure><img src="/files/Vw6uofR1bxltA1jpLArE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dRxgsIbVfj08gH8eQLs6" alt=""><figcaption></figcaption></figure>

#### **Riêng biệt**

```php
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**

```php
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

```php
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');
```

<figure><img src="/files/tLZaNx80ZwHHGeWOWSiT" alt=""><figcaption></figcaption></figure>

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

```php
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

```php
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

```javascript
require('./script');
```

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

```javascript
 alert("aaaaaaaaaa3");
```

<figure><img src="/files/nEPTiX6CfBHBIsLdIAm1" alt=""><figcaption></figcaption></figure>

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

```javascript
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();
```

<figure><img src="/files/qhEvKqO7kp8lKRaazjvE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dRxgsIbVfj08gH8eQLs6" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/laravel-advanced/laravel-mix-with-public-folder-outside-the-project-folder-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.