├── resources ├── assets │ ├── admin │ │ ├── less │ │ │ └── admin.less │ │ ├── sass │ │ │ └── admin.sass │ │ └── js │ │ │ └── admin.js │ └── website │ │ ├── less │ │ └── website.less │ │ ├── sass │ │ └── website.sass │ │ └── js │ │ └── website.js └── views │ ├── admin.blade.php │ └── website.blade.php ├── webpack.mix.js ├── webpack.mix.admin.js ├── webpack.mix.website.js ├── .gitignore ├── README.md └── package.json /resources/assets/admin/less/admin.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/assets/admin/sass/admin.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/assets/website/less/website.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/assets/website/sass/website.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/assets/admin/js/admin.js: -------------------------------------------------------------------------------- 1 | // search for this in /public_html/assets/admin/js/global.js to verify successful compilation 2 | console.log('avocado'); -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix'); 2 | 3 | if (process.env.section) { 4 | require(`${__dirname}/webpack.mix.${process.env.section}.js`); 5 | } -------------------------------------------------------------------------------- /resources/assets/website/js/website.js: -------------------------------------------------------------------------------- 1 | // search for this in /public_html/assets/website/js/global.js to verify successful compilation 2 | console.log('watermelon'); -------------------------------------------------------------------------------- /webpack.mix.admin.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix'); 2 | 3 | mix 4 | .setPublicPath(path.normalize('public_html/assets/admin')) 5 | .options({ 6 | processCssUrls: false 7 | }) 8 | .js('resources/assets/admin/js/admin.js', 'js/global.js') 9 | .less('resources/assets/admin/less/admin.less', 'css/style.css') 10 | ; -------------------------------------------------------------------------------- /webpack.mix.website.js: -------------------------------------------------------------------------------- 1 | let { mix } = require('laravel-mix'); 2 | 3 | mix 4 | .setPublicPath(path.normalize('public_html/assets/website')) 5 | .less('resources/assets/website/less/website.less', 'css/style.css') 6 | .options({ 7 | processCssUrls: false 8 | }) 9 | .js('resources/assets/website/js/website.js', 'js/global.js') 10 | ; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | public_html/ 2 | vendor/ 3 | node_modules/ 4 | npm-debug.log 5 | 6 | # Laravel 4 specific 7 | bootstrap/compiled.php 8 | app/storage/ 9 | 10 | # Laravel 5 & Lumen specific 11 | public/storage 12 | public/hot 13 | storage/*.key 14 | .env.*.php 15 | .env.php 16 | .env 17 | Homestead.yaml 18 | Homestead.json 19 | 20 | # Rocketeer PHP task runner and deployment package. https://github.com/rocketeers/rocketeer 21 | .rocketeer/ 22 | -------------------------------------------------------------------------------- /resources/views/admin.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{-- without mix.extract() --}} 6 | 7 | {{-- with mix.extract() --}} 8 | {{-- --}} 9 | {{-- --}} 10 | {{-- --}} -------------------------------------------------------------------------------- /resources/views/website.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{-- without mix.extract() --}} 6 | 7 | {{-- with mix.extract() --}} 8 | {{-- --}} 9 | {{-- --}} 10 | {{-- --}} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is an example of a [__Laravel Mix__](https://github.com/JeffreyWay/laravel-mix) front-end build system which handles admin panel and website concerns separately. It works with different mix configs and outputs separate Mix manifests. The build scripts are defined in `package.json`. It is as simple as possible so that it can be easily adapted to an existing Laravel project. 2 | 3 | 1. Run `npm install` to set up the dependencies. 4 | 2. Modify `webpack.mix.admin.js` or `webpack.mix.website.js` if you want to change sources and destinations, or to play around with the build process of course. 5 | 3. Run one of the build scripts and check out the output (for example `npm run dev`) 6 | 7 | I put this together after reading through many excellent replies to various Laravel Mix issues. Feel free to fork this repo and add to it. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "npm run development", 5 | "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", 6 | "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", 7 | "prod": "npm run production", 8 | "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", 9 | "admin-dev": "npm run admin-development", 10 | "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", 11 | "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", 12 | "admin-prod": "npm run admin-production", 13 | "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" 14 | }, 15 | "devDependencies": { 16 | "bootstrap-less": "^3.3.8", 17 | "cross-env": "^5.0.4", 18 | "jquery": "^3", 19 | "laravel-mix": "^6.0.49", 20 | "less": "^3.8.1", 21 | "less-loader": "^4.0.5" 22 | } 23 | } 24 | --------------------------------------------------------------------------------