Как правильно собрать 2 разных js в webpack?

Question

[Kirby24]

Здравствуйте.
Создаю 2 разных файла js для webpack
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/admin.js', 'public/js')
Но смысл в том что когда собираю все в app.js и admin.js объединяются(то есть в app.js есть скрипты от админа, а в admin.js есть скрипты для пользователя)
В самих app.js и admin.js скрипты никак не пересекаются

Answer 1

[Сергей delphinpro]

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

[profesor08]

Судя по документации (https://laravel.su/docs/5.4/mix), должны компилироваться два файла. Если в файлах, одинаковый код, то надо смотреть сами файлы. Возможно там импортируются одинаковые вещи.

Если же хочешь, чтоб на разных страницах подключались разные файлы, то надо редактировать сам php шаблон.

Answer 3

[LionG]

Есть такое понятие точка входа... к ней подключаются необходимые файлы и получается дерево.
Для админки и приложения нужно разделить точки входа.

Я например так делаю:

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

В итоге в папке dist будет 2 файла: adminka.js и app.js.