Laravel Mix mehrere Eintrittspunkte erzeugt ein manifest.js

Question

Ich habe derzeit ein Problem, mehrere Eingangspunkte in meiner Mix-Datei zu verwenden.

// Mix frontend resources. 
mix.js('resources/assets/js/app.js', 'public/js') 
    .extract([ 
     'jquery', 'bootstrap', 'aos', 'lity', 
    ]); 

... 

// Mix app resources. 
mix.js('resources/assets/app/js/app.js', 'public/app/js'); 

Ich habe drei Einstiegspunkte in meiner Mix-Datei. Eine für Frontend, Backend und meine "Public App" Datei. Der Code oben speichert meine Frontend vendor.js und manifest.js Datei innerhalb public/app/js, wenn es innerhalb public/js sein sollte.

Als ich dann versuchen,

<script src="{{ mix('js/manifest.js') }}"></script> 
<script src="{{ mix('app/js/app.js') }}"></script> 

es wirft webpack Fehler zu verweisen:

Uncaught TypeError: Cannot read property 'call' of undefined 
    at __webpack_require__ (manifest.js?id=09ecc9b…:55) 
    at Object../node_modules/vue/dist/vue.common.js (app.js?id=6431fd7…:sourcemap:28709) 
    at __webpack_require__ (manifest.js?id=09ecc9b…:55) 
    at Object../resources/assets/app/js/app.js (app.js?id=6431fd7…:sourcemap:37900) 
    at __webpack_require__ (manifest.js?id=09ecc9b…:55) 
    at Object.0 (app.js?id=6431fd7…:sourcemap:38015) 
    at __webpack_require__ (manifest.js?id=09ecc9b…:55) 
    at webpackJsonpCallback (manifest.js?id=09ecc9b…:26) 
    at app.js?id=6431fd7…:sourcemap:1 

Gibt es noch eine Möglichkeit, mehrere Einstiegspunkte in einem Mix zu verwenden Datei?

Answer 1

Um eine Mix-Datei für Backend und Frontend jeder (und andere Einstiegspunkte bei Bedarf) zu erstellen, anpassen package.json:

"scripts": { 
    "dev": "npm run development", 
    "development": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "watch": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "prod": "npm run production", 
    "production": "cross-env process.env.section=website NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "admin-dev": "npm run admin-development", 
    "admin-development": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "admin-watch": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "admin-prod": "npm run admin-production", 
    "admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 
    }, 

webpack.mix. js:

let mix = require('laravel-mix'); 

if (process.env.section) { 
    require(`${__dirname}/webpack.mix.${process.env.section}.js`); 
} 

erstellen webpack.mix.website.js:

let { mix } = require('laravel-mix'); 

mix 
    .setPublicPath(path.normalize('public_html/assets/website')) 
    .less('resources/assets/website/less/website.less', 'css/style.css') 
    .options({ 
    processCssUrls: false 
    }) 
    .js('resources/assets/website/js/website.js', 'js/global.js') 
; 

erstellen webpack.mix.admin.js:

let mix = require('laravel-mix'); 

mix 
    .setPublicPath(path.normalize('public_html/assets/admin')) 
    .options({ 
    processCssUrls: false 
    }) 
    .js('resources/assets/admin/js/admin.js', 'js/global.js') 
    .less('resources/assets/admin/less/admin.less', 'css/style.css') 
; 

Dies ist derzeit die einzige Möglichkeit, mehrere Manifestdateien usw. für mehrere Einstiegspunkte auf verschiedenen Verzeichnisebenen zu erstellen.

Answer 2

hinzufügen "gulp": "^3.9.1" in Ihrer package.jsone Datei

"devDependencies": { 
    "axios": "^0.15.3", 
    "bootstrap-sass": "^3.3.7", 
    "cross-env": "^3.2.3", 
    "jquery": "^3.1.1", 
    "laravel-mix": "0.*", 
    "lodash": "^4.17.4", 
    "gulp": "^3.9.1", 
    "vue": "^2.1.10" 
    }, 

und in Ihrer webpack.mix.js Datei hinzufügen brüllen Code

const { mix } = require('laravel-mix'); 
    mix.scripts([ 
    'resources/assets/js/app.js' 

    ], 'public/js/manifest.js')//Combine All JS files into one file 
    .minify(); 

und dann unten Befehl für minify js

npm run production 

laufen

{{HTML :: script ('öffentlich/js/manifest.js')}} {{HTML :: script (' app/js/app.js')}}