How to mix multiple entry points and watch at same time for laravel mix

Viewed 1476

I've split frontend and admin webpack.mix files like so:

webpack.mix.js:

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

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

Then a seperare webpack.mix.admin.js and webpack.mix.website.js file for controlling the mix with the following in 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",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --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 --no-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-watch-poll": "npm run admin-watch -- --watch-poll",
    "admin-hot": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

webpack.mix.app.js

mix.js('resources/app/js/app.js', 'public/app/js')
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'resources/app/js/src'),
                '@assets': path.resolve(__dirname, 'resources/app/assets'),
                '@sass': path.resolve(__dirname, 'resources/app/sass')
            }
        },
        output: {
            chunkFilename: 'app/js/chunks/[name].js',
        }
    })
    .sass('resources/app/sass/app.scss', 'public/app/css').options({
        postCss:[require('autoprefixer'), require('postcss-rtl')]
    })
    .postCss('resources/app/assets/css/main.css', 'public/app/css', [
        tailwindcss('tailwind.js'), require('postcss-rtl')()
    ])
    .copy('node_modules/vuesax/dist/vuesax.css', 'public/app/css/vuesax.css') // Vuesax framework css
    .copy('node_modules/prismjs/themes/prism-tomorrow.css', 'public/app/css/prism-tomorrow.css') // Prism Tomorrow theme css
    .copy('resources/app/assets/css/iconfont.css', 'public/app/css/iconfont.css') // Feather Icon Font css
    .copyDirectory('resources/app/assets/fonts', 'public/app/fonts') // Feather Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont', 'public/app/css/material-icons') // Material Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont/material-icons.css', 'public/app/css/material-icons/material-icons.css') // Material Icon fonts css
    .copyDirectory('resources/app/assets/images', 'public/app/images')

webpack.mix.admin.js

mix.js('resources/admin/js/app.js', 'public/admin/js')
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'resources/admin/js/src'),
                '@assets': path.resolve(__dirname, 'resources/admin/assets'),
                '@sass': path.resolve(__dirname, 'resources/admin/sass')
            }
        },
        output: {
            chunkFilename: 'admin/js/chunks/[name].js',
        }
    })
    .sass('resources/admin/sass/app.scss', 'public/admin/css').options({
        postCss:[require('autoprefixer'), require('postcss-rtl')]
    })
    .postCss('resources/admin/assets/css/main.css', 'public/admin/css', [
        tailwindcss('tailwind.js'), require('postcss-rtl')()
    ])
    .copy('node_modules/vuesax/dist/vuesax.css', 'public/admin/css/vuesax.css') // Vuesax framework css
    .copy('node_modules/prismjs/themes/prism-tomorrow.css', 'public/admin/css/prism-tomorrow.css') // Prism Tomorrow theme css
    .copy('resources/admin/assets/css/iconfont.css', 'public/admin/css/iconfont.css') // Feather Icon Font css
    .copyDirectory('resources/admin/assets/fonts', 'public/admin/fonts') // Feather Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont', 'public/admin/css/material-icons') // Material Icon fonts
    .copyDirectory('node_modules/material-icons/iconfont/material-icons.css', 'public/admin/css/material-icons/material-icons.css') // Material Icon fonts css
    .copyDirectory('resources/admin/assets/images', 'public/admin/images')

It's all running well but I can only run npm run watch on the frontend when ideally I want to watch both frontend and admin files for changes.

I've tried npm run watch & npm run admin-watch but the latter is ignored

At the moment I am watching the frontend files and running npm run admin-prod as and when required but this has started to get a little frustrating

2 Answers

You can use concurrently for this. https://www.npmjs.com/package/concurrently

run npm install concurrently

Then update your script section like this:

"scripts": {
    "watch": "concurrently \"npm run admin-watch\" \"npm run watch\"",

This scenario will work.

package.json

    "scripts": {
        "dev": "npm run development",
        "dev:admin": "cross-env THEME=admin npm run dev",
        "dev:app": "cross-env THEME=app npm run dev",
    },

webpack.mix.js

    if (!process.env.THEME || process.env.THEME === "app") {
        mix.js('resources/app/js/app.js', 'public/app/js');
    }
    
    if (!process.env.THEME || process.env.THEME === "admin") {
        mix.js('resources/admin/js/app.js', 'public/admin/js');
    }

commands:

admin

npm run dev:admin

app

npm run dev:app

admin & app

npm run dev
Related