What is the right way to bundle 2 different js in webpack?

Question

JavaScript

Hello.
I create 2 different js files for webpack
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/admin.js', 'public/js')
But the point is that when I collect everything in app.js and admin.js they are combined (that is, in app.js there are scripts from the admin, and in admin.js there are scripts for the user)
In the app.js and admin.js scripts do not intersect in any way

Answer 1

package.json

{
    "private": true,
    "scripts": {
        "site:development": "mix",
        "site:watch": "mix watch",
        "site:hot": "mix watch --hot",
        "site:production": "mix --production",
        "dashboard:watch": "cross-env TARGET=dashboard mix watch",
        "dashboard:hot": "cross-env TARGET=dashboard mix watch --hot",
        "dashboard:production": "cross-env TARGET=dashboard mix --production"
    },
    "devDependencies": {
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.2.2",
        "chalk": "^4.1.0",
        "cross-env": "^7.0.3",
        "dotenv": "^8.2.0",
        "laravel-mix": "^6.0.13",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1"
    },
    "dependencies": {}
}

webpack.mix.js

/** @type {Api} */
const mix = require('laravel-mix');
const path = require('path');
const dotenv = require('dotenv');
/** @type {Chalk} */
const chalk = require('chalk');

const dotEnvLocation = path.resolve('./.env');
dotenv.config({ path: dotEnvLocation });

const WATCH = process.argv.includes('--watch');
const HOT = process.argv.includes('--hot');
const localDomain = process.env.LOCAL_DOMAIN ?? 'localhost';
const target = process.env.TARGET ?? 'site';

let browserSyncPort = 3000;
let hmrPort = 8088;

const logs = {
    mode    : WATCH ? chalk.red('WATCH') : HOT ? chalk.red('HOT') : 'None',
    domain  : process.env.LOCAL_DOMAIN ?? chalk.red(localDomain),
    frontend: process.env.FRONTEND_DIST ?? chalk.red(process.env.FRONTEND_DIST),
    backend : process.env.BACKEND_DIST ?? chalk.red(process.env.BACKEND_DIST),
};

console.log(chalk.cyan('Local domain:  ') + logs.domain);
console.log(chalk.cyan('Location .env: ') + dotEnvLocation);
console.log(chalk.cyan('Mode:          ') + logs.mode);
console.log(chalk.cyan('Public paths:'));
console.log(chalk.cyan('  Frontend:    ') + logs.frontend);
console.log(chalk.cyan('  Backend:     ') + logs.backend);

if (target === 'dashboard') {
    browserSyncPort = process.env.BACKEND_LOCAL_PORT ?? 3000;
    hmrPort = process.env.BACKEND_HMR_PORT ?? 8088;
    require('./webpack-dashboard.mix.js');
}

if (target === 'site') {
    browserSyncPort = process.env.FRONTEND_LOCAL_PORT ?? 3001;
    hmrPort = process.env.FRONTEND_HMR_PORT ?? 8089;
    require('./webpack-site.mix.js');
}

/*==
 *== Customize options
 *== ======================================= ==*/

mix.version();

mix.disableSuccessNotifications();

if (!HOT && WATCH) {
    mix.browserSync({
        proxy    : localDomain,
        startPath: target === 'site' ? '/' : '/admin',
        browser  : ['chrome'],
        notify   : false,
        port     : browserSyncPort,
    });
}

mix.options({
    clearConsole: false,
    hmrOptions  : {
        host: 'localhost',
        port: hmrPort,
    },
});

const webpackResolveRules = {
    extensions: ['*', '.wasm', '.mjs', '.js', '.jsx', '.json', '.vue'],
    alias     : {
        '@': path.join(__dirname, 'resources/js'),
    },
};

mix.sourceMaps(false, 'source-map');

if (!mix.inProduction()) {
    mix.webpackConfig({
        output : { devtoolModuleFilenameTemplate: '[resource-path]' },
        resolve: webpackResolveRules,
    });
} else {
    mix.webpackConfig({
        resolve: webpackResolveRules,
    });
}

webpack.mix.site.js

/** @type {Api} */
const mix = require('laravel-mix');

const HOT = process.argv.includes('--hot');

if (!process.env.FRONTEND_DIST) throw Error;

mix.setPublicPath(`public/${process.env.FRONTEND_DIST}`);
if (!HOT) mix.setResourceRoot(`/${process.env.FRONTEND_DIST}`);

mix.js('resources/js/app.js', 'js');

mix.sass('resources/scss/app.scss', 'css');

mix.extract();

webpack.mix.dashboard.js

/** @type {Api} */
const mix = require('laravel-mix');

const HOT = process.argv.includes('--hot');

if (!process.env.BACKEND_DIST) throw Error;

mix.setPublicPath(`public/${process.env.BACKEND_DIST}`);
if (!HOT) mix.setResourceRoot(`/${process.env.BACKEND_DIST}`);

mix.js('resources/dashboard/js/main.js', 'js');

mix.sass('resources/dashboard/scss/main.scss', 'css');

mix.extract();

.env

LOCAL_DOMAIN=delphinpro.local
FRONTEND_LOCAL_PORT=3000
FRONTEND_HMR_PORT=8003
FRONTEND_DIST=dist/frontend
BACKEND_LOCAL_PORT=3004
BACKEND_HMR_PORT=8004
BACKEND_DIST=dist/backend

config/app.php

<?php
return [
    // .....
    'frontend' => [
        'dist' => env('FRONTEND_DIST'),
    ],
    'backend' => [
        'dist' => env('BACKEND_DIST'),
    ],
];

*.blage.php

<link href="{{ mix('css/app.css', config('app.frontend.dist')) }}" rel="stylesheet">
<script src="{{ mix('js/app.js', config('app.frontend.dist')) }}"></script>

Answer 2

Judging by the documentation ( https://laravel.su/docs/5.4/mix ), two files should be compiled. If the files have the same code, then you need to look at the files themselves. Perhaps the same things are imported there.
If you want different files to be connected on different pages, then you need to edit the php template itself.

Answer 3

There is such a thing as an entry point ... the necessary files are connected to it and a tree is obtained.
For the admin panel and the application, you need to separate the entry points.
For example I do this:

//webpack.base.conf.js
export default {
    entry: {
        adminka: `${PATHS.src}/scripts/adminka.js`,
        app: `${PATHS.src}/scripts/app.js`
    },
    //...
}

As a result, there will be 2 files in the dist folder: adminka.js and app.js.